/* =====================================================================
   Safety Auto — A6 landscape receipt (148 mm x 105 mm)
   Exact copy of "Modern SAFETY AUTO Receipt Form".
   Every position is measured from the 1491 x 1055 px reference and
   converted with --u (1 reference pixel = 148mm / 1491).
   DO NOT "simplify" these numbers — they are what makes it match.
   ===================================================================== */

@font-face { font-family: "SA Saira"; src: url("fonts/saira-semi-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "SA Saira"; src: url("fonts/saira-semi-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "SA Saira"; src: url("fonts/saira-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "SA Saira"; src: url("fonts/saira-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: block; }

.sa-receipt {
  --u: calc(148mm / 1491);
  --sa-blue: #00A2F5;
  --sa-blue-soft: #DDF4FD;
  --sa-navy: #0B1830;
  --sa-line: #33435F;
  --sa-ink: #0A0A0C;
  --sa-grey: #A9A9AB;

  position: relative;
  width: 148mm;
  height: 105mm;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  color: var(--sa-ink);
  font-family: "SA Saira", "Saira Semi Condensed", "Arial Narrow", Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sa-receipt *, .sa-receipt *::before, .sa-receipt *::after {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* generic absolute box: set --x --y --w --h in reference px */
.sa-abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* ---------- corner decorations (SVG, drawn in reference px) ---------- */
.sa-corners { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---------- watermark ---------- */
.sa-watermark { z-index: 1; opacity: 0.13; object-fit: contain; }

/* ---------- header ---------- */
.sa-logo { z-index: 3; object-fit: contain; }
.sa-logo-underline { z-index: 3; background: var(--sa-blue); border-radius: calc(2 * var(--u)); }
.sa-vdivider { z-index: 3; background: var(--sa-navy); }

.sa-contact-icon {
  z-index: 3; border-radius: 50%; background: var(--sa-blue);
  display: flex; align-items: center; justify-content: center;
}
.sa-contact-icon svg { width: 58%; height: 58%; fill: #fff; }

.sa-text {
  z-index: 4; display: flex; align-items: center; white-space: nowrap;
  line-height: 1; color: var(--sa-ink);
}
.sa-phone    { font-size: calc(50 * var(--u)); font-weight: 600; letter-spacing: calc(-2.5 * var(--u)); }
.sa-location { font-size: calc(39 * var(--u)); font-weight: 500; letter-spacing: calc(-0.5 * var(--u)); }

/* ---------- number & date ---------- */
.sa-no-label   { font-size: calc(35 * var(--u)); font-weight: 400; color: var(--sa-navy); }
.sa-no-value   { font-size: calc(67 * var(--u)); font-weight: 400; color: var(--sa-ink); letter-spacing: calc(-1.6 * var(--u)); }
.sa-date-label { font-size: calc(37 * var(--u)); font-weight: 400; color: var(--sa-navy); }
.sa-date-dots  { z-index: 3; border-bottom: calc(3 * var(--u)) dotted var(--sa-navy); }
.sa-date-value { font-size: calc(34 * var(--u)); font-weight: 600; color: var(--sa-ink); justify-content: center; }

/* ---------- capsule fields ---------- */
.sa-field {
  z-index: 3;
  border: calc(1.7 * var(--u)) solid var(--sa-line);
  border-radius: calc(51 * var(--u));
  background: transparent;
}
.sa-field-icon {
  position: absolute;
  left: calc(14 * var(--u));
  top: calc(-1 * var(--u));
  width: calc(101 * var(--u));
  height: calc(101 * var(--u));
  border-radius: 50%;
  background: var(--sa-blue-soft);
  display: flex; align-items: center; justify-content: center;
}
.sa-field-icon svg { width: 77%; height: 77%; fill: var(--sa-blue); }
.sa-field-label {
  position: absolute;
  left: calc(143 * var(--u));
  top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: calc(34 * var(--u)); font-weight: 500; color: var(--sa-ink);
  line-height: 1; white-space: nowrap;
  padding-top: calc(4 * var(--u)); letter-spacing: calc(-0.3 * var(--u));
}
.sa-field-divider {
  position: absolute;
  left: calc(330 * var(--u));
  top: calc(20 * var(--u));
  width: calc(2.5 * var(--u));
  height: calc(59 * var(--u));
  background: var(--sa-line);
}
.sa-field-value {
  position: absolute;
  left: calc(362 * var(--u));
  right: calc(50 * var(--u));
  top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: calc(40 * var(--u)); font-weight: 600; color: var(--sa-ink);
  line-height: 1.05; white-space: nowrap; overflow: hidden;
}

/* ---------- footer ---------- */
.sa-footer-line { z-index: 3; background: var(--sa-line); }
.sa-thankyou {
  z-index: 4; justify-content: center;
  font-size: calc(29 * var(--u)); font-weight: 600;
  letter-spacing: calc(12.1 * var(--u)); padding-left: calc(12.1 * var(--u));
  color: var(--sa-ink);
}

/* ---------- printing ---------- */
@page { size: 148mm 105mm; margin: 0; }

@media print {
  html, body { width: 148mm; height: 105mm; margin: 0 !important; padding: 0 !important; background: #fff; }
  .sa-receipt { box-shadow: none !important; transform: none !important; margin: 0 !important; break-after: avoid; page-break-after: avoid; }
}