/* ============================================================
   FEATURE SHEET — visual styles
   CSS custom properties are set via JavaScript for live branding
   ============================================================ */

#sheet-preview {
  --banner-color: #4B5563;
  --accent-color: #1a1a1a;
  --font-headline: Georgia, serif;
  --font-body: Arial, sans-serif;

  background: #fff;
  width: 100%;
  font-family: var(--font-body);
  color: #000;
  box-sizing: border-box;

  /* Lock to letter page content-area proportions (576pt × 756pt with 18pt margins) */
  display: flex;
  flex-direction: column;
  aspect-ratio: 576 / 756;
  overflow: hidden;
}

/* ── HEADER: builder logo + broker logo ─────────────────── */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #e0e0e0;
}

.sheet-logo-slot {
  display: flex;
  align-items: center;
}

.sheet-logo-slot.builder {
  flex: 0 0 55%;
}

.sheet-logo-slot.broker {
  flex: 0 0 35%;
  justify-content: flex-end;
}

.sheet-logo-slot img {
  max-height: 68px;
  max-width: 100%;
  object-fit: contain;
  display: none;
}

.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 56px;
  border: 1.5px dashed #bbb;
  border-radius: 4px;
  color: #aaa;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: #fafafa;
}

.sheet-logo-slot.broker .logo-placeholder {
  width: 130px;
  height: 52px;
}

/* ── ADDRESS BANNER ──────────────────────────────────────── */
.sheet-address-banner {
  background-color: var(--banner-color);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--font-headline);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── PHOTOS ──────────────────────────────────────────────── */
.sheet-photos {
  display: flex;
  flex: 1;               /* grows to fill remaining page height */
  min-height: 160px;
  background-color: var(--banner-color);
  padding: 0 6px 20px;   /* flush top (photos kiss the banner); colored floor below for shadow */
  gap: 6px;
}

.sheet-photo-slot {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #e8e8e8;
  border-radius: 1px;
  /* Strong downward shadow onto the colored floor */
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.3);
}

.sheet-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  gap: 6px;
}

.photo-placeholder svg {
  opacity: 0.4;
}

/* ── FINANCIAL TABLE ─────────────────────────────────────── */
.sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.88em;
  margin-top: 4px;
}

.sheet-table td {
  border: 1px solid var(--accent-color);
  padding: 7px 10px;
  vertical-align: middle;
}

/* Label column */
.sheet-table .col-label {
  font-weight: 700;
  width: 38%;
}

/* Single-value rows (Purchase Price, Interest Rate) */
.row-purchase-price .col-value,
.row-interest-rate .col-value {
  text-align: center;
  font-weight: 700;
  font-size: 1.05em;
}

/* Down payment percentage header row */
.row-down-pct td {
  font-weight: 700;
  text-align: center;
  border-top: 2px solid var(--accent-color);
  background: #f9f9f9;
}

.row-down-pct .col-label {
  text-align: left;
}

/* Data cells for remaining rows */
.row-down-amount td:not(.col-label),
.row-monthly-payment td:not(.col-label) {
  font-weight: 700;
}

.row-total-mortgage td:not(.col-label),
.row-income-required td:not(.col-label) {
  font-weight: 400;
}

.sheet-table td:not(.col-label) {
  text-align: center;
}

/* ── NO-QR FOOTER STATE ─────────────────────────────────── */
.sheet-footer.no-qr .sheet-footer-apply {
  display: none;
}

.sheet-footer.no-qr .sheet-footer-broker {
  width: 100%;
  justify-content: center;
  gap: 20px;
}

.sheet-footer.no-qr .broker-photo-wrap {
  width: 90px;
  height: 90px;
}

.sheet-footer.no-qr .broker-name-script {
  font-size: 1.6em;
}

.sheet-footer.no-qr .broker-details {
  font-size: 0.85em;
}

/* ── WATERMARK ───────────────────────────────────────────── */
.sheet-watermark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 9px;
  color: #c0c0c0;
  padding: 5px 0 4px;
  letter-spacing: 0.05em;
  font-family: var(--font-body);
}

.watermark-wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #b0b0b0;
}

/* ── DISCLAIMERS ─────────────────────────────────────────── */
.sheet-disclaimers {
  padding: 6px 12px 4px;
  font-size: 0.7em;
  font-style: italic;
  color: #444;
  line-height: 1.7;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  margin-top: 4px;
  gap: 16px;
  border-top: 1px solid #ddd;
}

/* Apply Here + QR */
.sheet-footer-apply {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.apply-text {
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apply-arrow {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1;
  margin: 0 2px;
}

#preview-qr canvas,
#preview-qr img {
  display: block;
  width: 82px !important;
  height: 82px !important;
}

/* Broker info */
.sheet-footer-broker {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.broker-photo-wrap {
  width: 78px;
  height: 78px;
  border-radius: 50%; /* default: circular */
  overflow: hidden;
  flex-shrink: 0;
  background: #e0e0e0;
  transition: border-radius 0.2s;
}

.broker-photo-wrap.square {
  border-radius: 8px;
}

.broker-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.broker-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 11px;
}

.broker-info-text {}

.broker-name-script {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.4em;
  line-height: 1.2;
  margin-bottom: 3px;
}

.broker-details {
  font-size: 0.78em;
  line-height: 1.6;
}

.broker-details strong {
  font-weight: 700;
  display: block;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  @page {
    size: letter portrait;
    margin: 0.35in;
  }

  /* Hide everything except the sheet */
  body > * {
    display: none !important;
  }

  #sheet-preview {
    display: block !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Force color printing */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .sheet-address-banner {
    background-color: var(--banner-color) !important;
    color: #fff !important;
  }

  .logo-placeholder,
  .photo-placeholder,
  .broker-photo-placeholder {
    display: none !important;
  }

  .sheet-photo-slot img,
  .sheet-logo-slot img,
  .broker-photo-wrap img {
    display: block !important;
  }
}