/* =====================================================================
   Hillel Energy · quote print template
   Authoring grid: the original artwork at 150 dpi = 1241 x 1755 px.
   --u is one of those px expressed in mm, so every offset below can be
   written in the same numbers that were measured off the source PDF.
   ===================================================================== */

@font-face {
  font-family: 'HillelSans';
  src: url('fonts/Assistant.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: block;
}

:root {
  --u: 0.16923077mm;          /* 297mm / 1755 */
  --navy: #163973;
  --black: #000000;
  --gold: #FBC901;
  --grey: #3c3c3c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'HillelSans', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

@page { size: A4 portrait; margin: 0; }

.page {
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 210mm 297mm;
}
.page:last-child { page-break-after: auto; break-after: auto; }
/* preview-only backdrop; overlays follow in DOM order and so paint above it */
.page > img.plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

html:not(.preview) .page[data-bg="p01"] { background-image: url('../public/assets/pages/p01.jpg'); }
html:not(.preview) .page[data-bg="p02"] { background-image: url('../public/assets/pages/p02.jpg'); }
html:not(.preview) .page[data-bg="p03"] { background-image: url('../public/assets/pages/p03.jpg'); }
html:not(.preview) .page[data-bg="p04"] { background-image: url('../public/assets/pages/p04.jpg'); }
html:not(.preview) .page[data-bg="p05"] { background-image: url('../public/assets/pages/p05.jpg'); }
html:not(.preview) .page[data-bg="p06"] { background-image: url('../public/assets/pages/p06.jpg'); }
html:not(.preview) .page[data-bg="p07"] { background-image: url('../public/assets/pages/p07.jpg'); }
html:not(.preview) .page[data-bg="p08"] { background-image: url('../public/assets/pages/p08.jpg'); }
html:not(.preview) .page[data-bg="p09"] { background-image: url('../public/assets/pages/p09.jpg'); }
html:not(.preview) .page[data-bg="p10"] { background-image: url('../public/assets/pages/p10.jpg'); }
html:not(.preview) .page[data-bg="p11"] { background-image: url('../public/assets/pages/p11.jpg'); }
html:not(.preview) .page[data-bg="p12"] { background-image: url('../public/assets/pages/p12.jpg'); }

/* ---------- generic positioning helpers -------------------------------- */
/* right-anchored box: --r right edge, --t top, --w width  (all in px150) */
.f {
  position: absolute;
  right: calc(var(--u) * (1241 - var(--r)));
  top: calc(var(--u) * var(--t));
  width: calc(var(--u) * var(--w));
  text-align: right;
  direction: rtl;
  unicode-bidi: plaintext;
  font-size: calc(var(--u) * 40);
  font-weight: 400;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;      /* backstop: absurd input clips at the card, never escapes it */
}
.f > span { display: inline-block; }

/* centre-anchored box: --cx centre x, --t top */
.c {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--t));
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}

/* ---------- page 3 ----------------------------------------------------- */
.cap {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--t));
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: calc(var(--u) * 32);
  font-weight: 400;
  color: var(--black);
  direction: rtl;
}
.val {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--t));
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: calc(var(--u) * 27);
  font-weight: 400;
  color: var(--black);
  direction: ltr;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  line-height: 1;
}
/* max-width so a wide wordmark (Sungrow, JA Solar) shrinks instead of
   running out of its card */
.val img { height: calc(var(--u) * 31); width: auto; max-width: calc(var(--u) * 120);
           object-fit: contain; display: block; }
.val .brandtext { font-weight: 700; letter-spacing: -.01em; }

/* row-2 cards (reflow) */
.r2card { position: absolute; }
/* the sprites were cut without the soft shadow the printed cards carry, so it
   is drawn back on — drop-shadow follows the rounded corners, box-shadow would
   square them off */
.r2card > img.shell { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 7) rgba(22,57,115,.16)); }
.r2card .cap, .r2card .val { position: absolute; }

#notes { position: absolute; inset: 0; }
.noteline {
  position: absolute;
  right: calc(var(--u) * (1241 - 1105));
  width: calc(var(--u) * 960);
  top: calc(var(--u) * var(--t));
  font-size: calc(var(--u) * 26);
  color: var(--black);
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

/* gift card contents */
.giftwrap { position: absolute; }
.giftwrap > img.shell { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 7) rgba(22,57,115,.16)); }
/* Centred as a block so a one-line gift (Nisko) sits as well as a two-line
   one (Green Brush) instead of hugging the top of the card. */
.gift-text {
  position: absolute;
  right: calc(var(--u) * 50); top: calc(var(--u) * 74);
  width: calc(var(--u) * 281); height: calc(var(--u) * 218);
  display: flex; flex-direction: column; justify-content: center;
  direction: rtl; text-align: right;
}
.gift-title {
  font-size: calc(var(--u) * 30); font-weight: 700; color: var(--gold);
  margin-bottom: calc(var(--u) * 5);
}
.gift-body {
  font-size: calc(var(--u) * 22); color: var(--black); line-height: 1.35;
}
.gift-worth { color: var(--gold); font-size: calc(var(--u) * 30); }
/* the disc lifted out of cards/gift.png, redrawn on top of the thumbnail;
   5px is where it sits inside the sprite (disc 113,667 r64 · sprite origin 44,598) */
.gift-badge {
  position: absolute;
  left: calc(var(--u) * 5); top: calc(var(--u) * 5);
  width: calc(var(--u) * 128); height: calc(var(--u) * 128);
}
.gift-thumb {
  position: absolute; left: calc(var(--u) * 51); top: calc(var(--u) * 102);
  width: calc(var(--u) * 180); height: calc(var(--u) * 162);
  object-fit: cover; border-radius: calc(var(--u) * 8);
  border: calc(var(--u) * 3) solid #fff;
  box-shadow: 0 0 calc(var(--u)*6) rgba(0,0,0,.25);
}

/* ---------- page 5 ----------------------------------------------------- */
.p5v {
  position: absolute;
  left: calc(var(--u) * 378);
  top: calc(var(--u) * var(--t));
  font-size: calc(var(--u) * 37);
  color: var(--navy);
  direction: ltr;
  display: flex; align-items: center; gap: calc(var(--u) * 12);
  line-height: 1; white-space: nowrap;
}
.p5v img { height: calc(var(--u) * 30); width: auto; max-width: calc(var(--u) * 150);
           object-fit: contain; display: block; }
.p5v .brandtext { font-weight: 700; }
/* rows whose value carries a Hebrew unit: the artwork puts the unit to the
   LEFT of the figure, which is simply the RTL reading of "3,000 ש״ח" */
.p5v.rtl { direction: rtl; }
.p5l {
  position: absolute;
  right: calc(var(--u) * (1241 - 1004));
  top: calc(var(--u) * var(--t));
  font-size: calc(var(--u) * 31);
  color: var(--navy);
  direction: rtl; white-space: nowrap;
}
.p5totalwrap {
  position: absolute; left: calc(var(--u) * 378); top: calc(var(--u) * 770);
  display: inline-block; direction: rtl; text-align: right; color: var(--navy);
}
.p5total {
  font-size: calc(var(--u) * 47); font-weight: 700;
  white-space: nowrap; line-height: 1;
}
.p5total .cur { font-size: calc(var(--u) * 30); font-weight: 700; }
.p5vat {
  font-size: calc(var(--u) * 24); white-space: nowrap;
  margin-top: calc(var(--u) * 8);
}
.paycap {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * 1336);
  transform: translateX(-50%);
  width: calc(var(--u) * 215);
  font-size: calc(var(--u) * 23);
  line-height: 1.3;
  color: var(--black);
  direction: rtl; text-align: center;
}

/* ---------- page 6 ----------------------------------------------------- */
.stat {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--t));
  transform: translateX(-50%);
  font-size: calc(var(--u) * 35);
  font-weight: 700; color: var(--black);
  direction: ltr; white-space: nowrap; line-height: 1;
}
/* ₪ is an ET in bidi terms, so it glues itself to the right of a number.
   The artwork puts it on the left, so it is emitted ahead of the figure. */
.stat .cur { font-size: .72em; margin-right: calc(var(--u) * 5); }
.stat.rtl { direction: rtl; }   /* "3.5 שנים" — unit reads to the left */
#chart { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; }
#chart svg { position: absolute; left: calc(var(--u) * 90); top: calc(var(--u) * 820);
             width: calc(var(--u) * 1082); height: calc(var(--u) * 792); }

/* ---------- page 10 ---------------------------------------------------- */
.wr {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--t));
  transform: translateX(-50%);
  font-size: calc(var(--u) * 35);
  font-weight: 700; color: var(--gold);
  direction: rtl; white-space: nowrap; line-height: 1;
}

/* ---------- screen preview only ---------------------------------------- */
@media screen {
  body { background: #6b6f76; padding: 18px 0; }
  .page { margin: 0 auto 18px; box-shadow: 0 6px 24px rgba(0,0,0,.35); background-color: #fff; }
}