/* ==========================================================================
   PDF Letter Generation Styles
   ========================================================================== */

/* PDF-Only Layout (for #10 double window envelope) */
@page { size: Letter; margin: 0; }

#print-letter {
  width: 8.5in;
  height: 11in;
  background: white;
  display: block;
}

/* Preview container styling */
.letter-preview-container {
  width: 100%;
  max-width: 8.5in;
  margin: 2rem auto;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

/* 1) Common letter layout for all contexts */
.letter-sheet {
  position: relative;
  max-width: 8.5in;
  min-width: 8.5in;
  min-height: 11in;
  font-family: 'Times New Roman', serif;
  font-size: 12pt;
  line-height: normal;
  box-sizing: border-box;
  white-space: normal;
  text-align: left;
  background: white;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Logo section styling */
.letter-sheet .logo-section {
  position: absolute;
  top: 0.5in;
  right: 0.5in;
  width: 2in;
}

.letter-sheet .logo-section img {
  width: 100%;
  display: block;
  opacity: 0.75;
}

/* Envelope window: return address */
.letter-sheet .from-address {
  position: absolute;
  top: 0.5in;
  left: 0.5in;
  width: 4.5in;
  font-size: 11pt;
  line-height: 1.2;
}

/* Envelope window: delivery address */
.letter-sheet .to-address {
  position: absolute;
  top: 2.125in;
  left: 0.5in;
  width: 4.5in;
  font-size: 11pt;
  line-height: 1.2;
}

/* RE Line section */
.letter-sheet .reline-section {
  position: absolute;
  top: 3in;
  left: 0.5in;
  right: 0.5in;
  font-size: 12pt;
  line-height: 1.2;
  z-index: 1; /* ensure above logo */
}

/* Ensure reLine paragraph matches main text style */
.letter-sheet .reline-section p {
  margin: 0;
  font-size: 12pt;
  font-family: inherit;
  text-align: left;
}

/* Main letter body */
.letter-sheet .body-section {
  position: absolute;
  top: 3.75in;
  left: 0.5in;
  right: 0.5in;
  bottom: 1.5in; /* Add bottom margin for footer */
  white-space: pre-wrap; /* Preserve newline characters as line breaks */
  line-height: 1.5; /* Provide comfortable line spacing */
}

.letter-sheet .body-section .letter-body {
  position: static !important;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Footer section */
.letter-sheet .footer-section {
  position: absolute;
  bottom: 0.75in;
  left: 0.75in;
  right: 0.75in;
  font-size: 10pt;
  color: #555;
  text-align: left;
}

/* Mobile responsiveness for letter previews */
@media (max-width: 768px) {
  .letter-preview-container {
    padding: 0.5rem;
  }
  
  .letter-sheet {
    transform: scale(0.5);
  }
}

/* ==========================================================================
   Campaign Preview Specific Styles
   ========================================================================== */

/* Only apply these styles to campaign preview containers */
#step4 .letter-preview-container,
#step4 .form-container > .letter-preview-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 90vh !important;
  background: #f5f5f5 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#step4 .letter-preview-container .letter-sheet {
  /* Use the largest possible size that fits in the viewport, keeping 8.5:11 ratio */
  width: min(90vw, calc(90vh * 8.5 / 11)) !important;
  height: min(calc(90vw * 11 / 8.5), 90vh) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
  background: white !important;
  position: relative !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 900px) {
  #step4 .letter-preview-container,
  #step4 .form-container > .letter-preview-container {
    height: 100vw !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #step4 .letter-preview-container .letter-sheet {
    width: 100vw !important;
    height: calc(100vw * 11 / 8.5) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    transform: none !important;
  }
}

#step4 .letter-preview-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}