/* Template-backed live preview for /professional-paystub-generator/.
   Uses the actual PDF template render as the preview base. */
.premium-template-preview {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 612 / 792;
  background-image: url('/assets/images/premium-paystub-template-preview.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  container-type: inline-size;
  overflow: hidden;
}
.premium-template-preview .ptp-field {
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  white-space: pre-line;
  text-align: left;
  pointer-events: none;
  padding: 0;
  margin: 0;
  font-size: calc(var(--pt, 8) * 0.164cqw);
}
.premium-template-preview .ptp-field.ptp-right { text-align: right; white-space: nowrap; }
.premium-template-preview .ptp-field.ptp-center { text-align: center; }
.premium-template-preview .ptp-field.ptp-small { line-height: 1; }
.premium-template-preview .ptp-field:empty { display: none; }

/* Keep the inline preview compact, but make the lightbox a true zoom.
   Do not constrain the zoomed document by viewport height; allow the modal
   body to scroll so the actual stub becomes larger and easier to inspect. */
.gen-lightbox-panel {
  width: min(1220px, 98vw);
  max-height: 96vh;
}
.gen-lightbox-body {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  background: #f6f8f1;
}
.gen-lightbox-body .premium-template-preview,
.premium-template-preview.premium-template-preview--zoom {
  width: clamp(760px, 92vw, 1120px);
  max-width: none;
  flex: 0 0 auto;
  box-shadow: 0 18px 52px rgba(18, 32, 8, 0.26);
}
@media (max-width: 860px) {
  .gen-lightbox-body .premium-template-preview,
  .premium-template-preview.premium-template-preview--zoom {
    width: 94vw;
  }
}
#premium-engine-status { display: none !important; }

/* Premium preview calibration: browser text metrics differ from PDF AcroForm text.
   These rules keep the on-page preview visually aligned with the flattened PDF. */
.premium-template-preview .ptp-field[data-field="period_ending"],
.premium-template-preview .ptp-field[data-field="pay_date"],
.premium-template-preview .ptp-field[data-field="check_pay_date"],
.premium-template-preview .ptp-field[data-field="payroll_check_number"],
.premium-template-preview .ptp-field[data-field="check_social_security_no"] {
  white-space: nowrap;
}
.premium-template-preview .ptp-field[data-field="employer_name"],
.premium-template-preview .ptp-field[data-field="employer_address_1"],
.premium-template-preview .ptp-field[data-field="employer_address_2"],
.premium-template-preview .ptp-field[data-field="check_employer_name"],
.premium-template-preview .ptp-field[data-field="check_employer_address_1"],
.premium-template-preview .ptp-field[data-field="check_employer_address_2"],
.premium-template-preview .ptp-field[data-field="employee_name_address"] {
  line-height: 1.02;
}
.premium-template-preview .ptp-field[data-field="check_amount_words"] {
  white-space: nowrap;
  line-height: 1;
}
.premium-template-preview .ptp-field[data-field="state_income_tax_label"],
.premium-template-preview .ptp-field[data-field="local_income_tax_label"],
.premium-template-preview .ptp-field[data-field="state_disability_ui_label"] {
  white-space: nowrap;
}


/* Force the lightbox to zoom the actual premium stub document, not only the modal container.
   These !important rules intentionally override the compact inline preview sizing. */
.gen-lightbox-panel {
  width: min(1560px, 98vw) !important;
  max-height: 96vh !important;
}
.gen-lightbox-body {
  overflow: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 18px !important;
}
.gen-lightbox-body .premium-template-preview,
.gen-lightbox-body .premium-template-preview.premium-template-preview--zoom {
  width: 1280px !important;
  min-width: 1280px !important;
  max-width: none !important;
  height: auto !important;
  flex: 0 0 1280px !important;
  transform: none !important;
  transform-origin: top left !important;
  box-shadow: 0 18px 52px rgba(18, 32, 8, 0.26) !important;
}
@media (max-width: 900px) {
  .gen-lightbox-body .premium-template-preview,
  .gen-lightbox-body .premium-template-preview.premium-template-preview--zoom {
    width: 1040px !important;
    min-width: 1040px !important;
    flex-basis: 1040px !important;
  }
}