/* הקטלוג האונליין (online.py): הצופה שמסביב לעמודי הספר.
   העמודים עצמם הם אותו HTML של הספר, עם אותו גיליון (book.css), בגודל A4 אמיתי ומוקטנים ב-transform,
   כך שהטקסט נשאר טקסט: גוגל קורא אותו, החיפוש של הדפדפן מוצא אותו, והקישורים לחיצים.
   כאן רק המסגרת: סרגל, במה, דפדוף, ופאנל לתוכן העניינים, לחיפוש ולעמודים הממוזערים. */

:root {
  --ov-bg: #e7e9ec;
  --ov-bar: #ffffff;
  --ov-ink: #16191d;
  --ov-ink-2: #4b5158;
  --ov-line: #d5d9de;
  --ov-key: var(--brand-ink, #16191d);
  --ov-accent: var(--brand, #94d60a);
  --ov-focus: #1f6feb;
  --ov-bar-h: 56px;
  --ov-foot-h: 52px;
  --ov-s: 0.5;
}
html, body.ov { height: 100%; }
body.ov {
  background: var(--ov-bg);
  font-family: "Heebo", "Rubik", Arial, sans-serif;
  color: var(--ov-ink);
  overflow: hidden;
}
.ov button, .ov input, .ov a.ov-btn { font-family: inherit; }
.ov :focus-visible { outline: 3px solid var(--ov-focus); outline-offset: 2px; }
.ov-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 60; background: var(--ov-key); color: #fff;
  padding: 10px 14px; border-radius: 8px; font-size: 15px; }
.ov-skip:focus { top: 8px; }

/* ---------- סרגל עליון ---------- */
.ov-bar {
  position: fixed; inset: 0 0 auto 0; height: var(--ov-bar-h); z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--ov-bar); border-bottom: 1px solid var(--ov-line);
  box-shadow: 0 1px 6px rgba(20, 24, 28, .06);
}
.ov-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ov-brand img { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.ov-title { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ov-title b { font-family: "Rubik", sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-title span { font-size: 12.5px; color: var(--ov-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.ov-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ov-ink); cursor: pointer; font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.ov-btn:hover { background: #f0f2f4; }
.ov-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.ov-btn.on { background: var(--ov-key); color: #fff; }
.ov-btn .ov-lbl { display: none; }
.ov-btn.ov-dl { background: var(--ov-key); color: #fff; }
.ov-btn.ov-dl .ov-lbl { display: inline; }
.ov-sep { width: 1px; height: 24px; background: var(--ov-line); margin: 0 4px; }

/* ---------- הבמה והעמודים ---------- */
.ov-stage {
  position: fixed; inset: var(--ov-bar-h) 0 var(--ov-foot-h) 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom;
}
/* margin:auto ממרכז את העמוד כשהוא קטן מהבמה, ומתחיל מלמעלה כשהוא גדול ממנה (זום) */
.ov-spread { display: flex; flex-direction: row; gap: 0; margin: auto; padding: 18px 12px; }
.ov-sheet {
  position: relative; flex: 0 0 auto; overflow: hidden; background: #fff;
  width: calc(210mm * var(--ov-s)); height: calc(297mm * var(--ov-s));
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10), 0 8px 26px -6px rgba(20, 24, 28, .28);
}
.ov-spread.two .ov-sheet:first-child { box-shadow: 6px 0 14px -10px rgba(20, 24, 28, .4) inset, 0 8px 26px -6px rgba(20, 24, 28, .28); }
.ov-sheet > .page { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--ov-s)); }
/* טקסט משני בשולי העמוד: גוון כהה מעט יותר מבדפוס, כדי שיעמוד ביחס הניגודיות של הרשת (4.5 ומעלה) */
.ov-sheet > .page { --ink-3: #686c73; }
.ov-sheet.loading::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #f4f5f6 30%, #fbfbfc 50%, #f4f5f6 70%);
  background-size: 200% 100%; animation: ov-shimmer 1.2s linear infinite;
}
@keyframes ov-shimmer { to { background-position: -200% 0; } }
.ov-hit { animation: ov-hit 2.4s ease-out 1; border-radius: 3mm; }
@keyframes ov-hit { 0%, 30% { box-shadow: 0 0 0 2.4mm rgba(31, 111, 235, .35); } 100% { box-shadow: 0 0 0 0 rgba(31, 111, 235, 0); } }

/* ---------- דפדוף בתחתית ---------- */
.ov-foot {
  position: fixed; inset: auto 0 0 0; height: var(--ov-foot-h); z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ov-bar); border-top: 1px solid var(--ov-line);
}
.ov-nav {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px;
  background: #f0f2f4; color: var(--ov-ink); text-decoration: none; font-weight: 700; font-size: 15px;
}
.ov-nav:hover { background: #e4e7ea; }
.ov-nav[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.ov-nav svg { width: 18px; height: 18px; }
.ov-count { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ov-ink-2); }
.ov-count input {
  width: 64px; height: 36px; border: 1px solid var(--ov-line); border-radius: 8px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--ov-ink); background: #fff; direction: ltr;
}

/* ---------- פאנל: תוכן עניינים, חיפוש, עמודים ---------- */
.ov-panel {
  position: fixed; top: var(--ov-bar-h); bottom: var(--ov-foot-h); inset-inline-start: 0; z-index: 30;
  width: min(380px, 92vw); background: #fff; border-inline-end: 1px solid var(--ov-line);
  box-shadow: 0 10px 40px rgba(20, 24, 28, .18); display: flex; flex-direction: column;
}
.ov-panel[hidden] { display: none; }
/* במסך רחב הפאנל לא מסתיר את העמודים: הבמה מתכווצת לצידו */
@media (min-width: 1100px) { .ov.ov-open .ov-stage { inset-inline-start: min(380px, 92vw); } }
.ov-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ov-line); }
.ov-panel-head h2 { font-family: "Rubik", sans-serif; font-size: 17px; font-weight: 700; margin-inline-end: auto; }
.ov-panel-body { overflow: auto; padding: 8px 6px 18px; flex: 1 1 auto; }
.ov-toc a, .ov-results a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 8px;
  color: var(--ov-ink); text-decoration: none; font-size: 15px; line-height: 1.35;
}
.ov-toc a:hover, .ov-results a:hover, .ov-toc a[aria-current="true"] { background: #f0f2f4; }
.ov-toc a > span:not(.pg), .ov-results a > span:not(.pg) { flex: 1 1 auto; }
.ov-toc a .pg, .ov-results a .pg { flex: 0 0 auto; color: var(--ov-ink-2); font-size: 13px; direction: ltr; }
.ov-toc .ch { font-family: "Rubik", sans-serif; font-weight: 700; margin-top: 6px; }
.ov-toc .ch i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; align-self: center; }
.ov-toc .sub { padding-inline-start: 30px; font-size: 14px; }
.ov-search { padding: 12px 14px 4px; }
.ov-search input {
  width: 100%; height: 44px; border: 1px solid var(--ov-line); border-radius: 10px; padding: 0 12px;
  font-size: 16px; background: #fff; color: var(--ov-ink);
}
.ov-results small { display: block; color: var(--ov-ink-2); font-size: 12.5px; margin-top: 2px; }
.ov-note { padding: 10px 12px; color: var(--ov-ink-2); font-size: 14px; line-height: 1.5; }
.ov-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px; }
.ov-thumbs a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ov-ink-2); font-size: 12px; }
.ov-thumbs img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; background: #f4f5f6; border: 1px solid var(--ov-line); border-radius: 4px; }
.ov-thumbs a[aria-current="true"] img { outline: 3px solid var(--ov-accent); outline-offset: 1px; }
/* עגלת הזמנה: הכפתור בתוך העמוד שומר על גודל קבוע במסך, גם כשהעמוד מוקטן (מחולק בקנה המידה) */
article.fc { position: relative; }
.ov-add {
  position: absolute; top: 1.6mm; left: 1.6mm; z-index: 4; border: 0; cursor: pointer;
  font-family: "Rubik", sans-serif; font-weight: 700; color: #fff; background: var(--ov-key);
  font-size: calc(13px / var(--ov-s)); line-height: 1.2;
  padding: calc(6px / var(--ov-s)) calc(11px / var(--ov-s)); border-radius: calc(18px / var(--ov-s));
  box-shadow: 0 calc(2px / var(--ov-s)) calc(8px / var(--ov-s)) rgba(0, 0, 0, .22);
}
.ov-add.in { background: #0d6436; }
.ov-add.in::after { content: " \2713"; }
.ov-badge {
  position: absolute; top: 3px; inset-inline-start: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d93a2b; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.ov-btn { position: relative; }
.ov-cart { display: grid; gap: 6px; padding: 6px; }
.ov-cart-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--ov-line); border-radius: 10px; }
.ov-cart-name { flex: 1 1 auto; font-size: 14.5px; line-height: 1.35; }
.ov-cart-name small { display: block; color: var(--ov-ink-2); font-size: 12.5px; direction: ltr; text-align: end; }
.ov-qty { display: flex; align-items: center; gap: 4px; }
.ov-qty .ov-btn { min-width: 34px; height: 34px; background: #f0f2f4; font-size: 18px; }
.ov-qty span { min-width: 24px; text-align: center; font-weight: 700; }
.ov-field {
  display: block; width: calc(100% - 12px); margin: 8px 6px 0; border: 1px solid var(--ov-line); border-radius: 10px;
  padding: 10px 12px; font-size: 16px; font-family: inherit; background: #fff; color: var(--ov-ink); resize: vertical;
}
.ov-send {
  display: flex; align-items: center; justify-content: center; margin: 12px 6px 0; height: 48px; border-radius: 12px;
  background: #1f8f4e; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
}
.ov-send:hover { background: #177a41; }
.ov-clear { margin: 10px 6px 0; border: 0; background: none; color: var(--ov-ink-2); text-decoration: underline; cursor: pointer; font-size: 14px; }
.ov-toast {
  position: fixed; bottom: calc(var(--ov-foot-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--ov-key); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* ---------- נייד ---------- */
@media (max-width: 720px) {
  :root { --ov-bar-h: 52px; --ov-foot-h: 56px; }
  .ov-title span, .ov-sep, .ov-hide-m { display: none; }
  .ov-title b { font-size: 14px; }
  .ov-btn { min-width: 38px; padding: 0 7px; }
  .ov-btn.ov-dl .ov-lbl { display: none; }
  .ov-brand img { height: 26px; max-width: 92px; }
  .ov-spread { padding: 10px 6px; }
  .ov-panel { width: 100vw; }
}
@media (max-width: 430px) {
  .ov-title { display: none; }
  /* בטלפון מגדילים בצביטה, אז כפתור הזום מפנה מקום לכפתורי ההזמנה וה-PDF */
  .ov-tools [data-act="zoom-in"] { display: none; }
  .ov-btn { min-width: 36px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-sheet.loading::after, .ov-hit { animation: none; }
}

/* ---------- הדפסה: העמוד שעל המסך, בגודל אמיתי ---------- */
@media print {
  @page { size: 210mm 297mm; margin: 0; }
  body.ov { overflow: visible; background: #fff; }
  .ov-bar, .ov-foot, .ov-panel, .ov-toast, .ov-skip, .ov-add { display: none !important; }
  .ov-stage { position: static; overflow: visible; display: block; }
  .ov-spread { display: block; margin: 0; padding: 0; }
  .ov-sheet { width: 210mm; height: 297mm; box-shadow: none; break-after: page; }
  .ov-sheet > .page { transform: none; }
}