/* ============================================================
   PROOF OVERLAY TEMPLATE SYSTEM
   Positions overlay text/fields on the preview image
   per mail product type. Each .template-X class corresponds
   to a getProductTemplate() return value in products.js
   ============================================================ */

.proof-overlay {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  word-wrap: break-word;
}

/* Postcard Back Overlay Positions (Standard Written Style) */
/* ========================================
   PROOF OVERLAY TEMPLATE SYSTEM
   Templates for different product types
   ======================================== */

.proof-overlay {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  word-wrap: break-word;
  pointer-events: none;
}

/* ----------------------------------------
   TEMPLATE: Standard Postcards (Default)
   Products: Americana, Comic, Mystical, Asset, AI, Custom
   ---------------------------------------- */
.template-standard .overlay-full-name {
  top: 2.1875%;
  left: 3.875%;
  width: 47%;
  height: 6%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: clamp(6px, 2cqw, 12px);
}

.template-standard .overlay-rma {
  top: 8.1875%;
  left: 3.875%;
  width: 51.36%;
  height: 6.25%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 2cqw, 12px);
  line-height: 1.2;
}

.template-standard .overlay-website {
  top: 14.4375%;
  left: 3.875%;
  width: 47%;
  height: 7.25%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  font-size: clamp(6px, 2cqw, 10px);
  word-break: break-all;
}

.template-standard .overlay-custom-message {
  top: 27.4375%;
  left: 3.875%;
  width: 46%;
  height: 65%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 2.5cqw, 14px);
  line-height: 1.4;
}

.template-standard .overlay-recipient-name {
  top: 38.2%;
  left: 52.7083%;
  width: 45.5%;
  height: 5.5%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  font-size: clamp(6px, 1.9cqw, 14px);
}

.template-standard .overlay-recipient-address {
  top: 43.1875%;
  left: 52.7083%;
  width: 45.5%;
  height: 24.75%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 2cqw, 13px);
  line-height: 1.3;
}

.template-standard .overlay-logo {
  top: 2%;
  left: 55%;
  width: 20%;
  height: 15%;
}

/* Non-classic postcards use blue "ballpoint ink" proof text */
.proof-ink-blue .overlay-full-name,
.proof-ink-blue .overlay-rma,
.proof-ink-blue .overlay-website,
.proof-ink-blue .overlay-custom-message,
.proof-ink-blue .overlay-recipient-name,
.proof-ink-blue .overlay-recipient-address {
  color: #033AA8;
}

/* Postcard sender info proof typography (single flowing block) */
.proof-postcard-sender-plain .overlay-full-name {
  font-family: Arial, sans-serif;
  color: #000;
  font-size: clamp(12px, 2.0cqw, 32px);
  line-height: 1.23;
  box-sizing: border-box;
  padding-right: 0.2in;
  top: 6.3%;
  left: 2.8%;
  width: 40.5%;
  height: 20%;
  display: block;
  overflow: hidden;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.proof-postcard-sender-plain .overlay-rma,
.proof-postcard-sender-plain .overlay-website {
  display: none !important;
}

/* Quarter-inch right inset for postcard proof message body text */
.proof-postcard-message-quarter-inch.template-standard .overlay-custom-message,
.proof-postcard-message-quarter-inch.template-flipwithrick .overlay-custom-message {
  box-sizing: border-box;
  padding-right: 2.8%;
}

/* Postcard proof readability/layout adjustments:
   - larger handwriting scale
   - message block aligned to divider-line vertical zone
   - allow signature to flow below the zone when needed */
.proof-postcard-message-quarter-inch.template-standard .overlay-custom-message,
.proof-postcard-sender-plain.template-standard .overlay-custom-message {
  top: 29.5%;
  left: 3.1%;
  width: 44%;
  height: 50%;
  font-size: clamp(16px, 2.3cqw, 37px);
  line-height: 1.38;
  overflow: visible;
}

.proof-postcard-message-quarter-inch.template-standard .overlay-recipient-name,
.proof-postcard-sender-plain.template-standard .overlay-recipient-name {
  top: 41.2%;
  left: 54.7%;
  font-size: clamp(18px, 2.8cqw, 45px);
  line-height: 1.1;
  overflow: visible;
}

.proof-postcard-message-quarter-inch.template-standard .overlay-recipient-address,
.proof-postcard-sender-plain.template-standard .overlay-recipient-address {
  top: 46.2%;
  left: 54.7%;
  width: 32%;
  height: 18%;
  font-size: clamp(18px, 2.8cqw, 45px);
  line-height: 1.21;
  overflow: visible;
}

/* ----------------------------------------
   TEMPLATE: Envelope Style
   Products: Greeting Letters, Hybrid Letters
   ---------------------------------------- */
.template-envelope .overlay-full-name {
  top: 5.4%;
  left: 4.1%;
  width: 30%;
  height: 18%;
  font-family: Arial, sans-serif;
  color: #000;
  display: block;
  font-size: clamp(12px, 2.5cqw, 36px);
  line-height: 1.27;
  overflow: visible;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.template-envelope .overlay-rma {
  display: none !important;
}

.template-envelope .overlay-recipient-name {
  top: 38.4%;
  left: 30%;
  width: 40%;
  height: 9.48%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #033AA8;
  display: flex;
  align-items: flex-start;
  font-size: clamp(16px, 2.85cqw, 42px);
  line-height: 1.33;
  overflow: visible;
}

.template-envelope .overlay-recipient-address {
  top: 44.8%;
  left: 30%;
  width: 40%;
  height: 20%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #033AA8;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: clamp(16px, 2.85cqw, 42px);
  line-height: 1.33;
  overflow: visible;
}

.template-envelope .overlay-custom-message {
  top: 22.8%;
  left: 2.5%;
  width: 95%;
  height: 74.4%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #033AA8;
  display: flex;
  align-items: flex-start;
  font-size: clamp(16px, 3.1cqw, 52px);
  line-height: 1.4;
}

.template-envelope:not(.proof-letter-insert-placeholder) .overlay-custom-message {
  display: none !important;
}

.template-envelope .overlay-logo {
  top: 2.8%;
  left: 33.4%;
  width: 32.2%;
  height: 18.7%;
}

.template-envelope .overlay-website {
  top: 95%;
  left: 25%;
  width: 50%;
  height: 4%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: clamp(12px, 2.4cqw, 40px);
  word-break: break-all;
}

.template-envelope:not(.proof-letter-insert-placeholder) .overlay-website {
  display: none !important;
}

/* ----------------------------------------
   TEMPLATE: Check Mailer
   Products: Check Mailer
   ---------------------------------------- */
.template-check .overlay-full-name {
  top: 4%;
  left: 4%;
  width: 40%;
  height: 5%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  font-size: clamp(6px, 2.2cqw, 12px);
  font-weight: 600;
}

.template-check .overlay-rma {
  top: 9%;
  left: 4%;
  width: 45%;
  height: 10%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 1.8cqw, 10px);
  line-height: 1.3;
}

.template-check .overlay-recipient-name {
  top: 35%;
  left: 8%;
  width: 50%;
  height: 6%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  font-size: clamp(6px, 2.5cqw, 14px);
  font-weight: 600;
}

.template-check .overlay-recipient-address {
  top: 41%;
  left: 8%;
  width: 50%;
  height: 18%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 2cqw, 12px);
  line-height: 1.3;
}

.template-check .overlay-custom-message {
  display: none; /* Check mailers don't have custom message area */
}

.template-check .overlay-website {
  display: none;
}

.template-check .overlay-logo {
  top: 3%;
  left: 70%;
  width: 25%;
  height: 12%;
}

/* ----------------------------------------
   TEMPLATE: Home Services Type A
   Products: HVAC (AC Tune Up, AC Inspection), Roofing (Roofing Free Estimate)
   Electrician, Windows, Landscaping 5, Lawn Care 2, Pest Control 2
   Large phone overlay at top, offer amount
   ---------------------------------------- */
.template-homeservices-a .overlay-full-name {
  display: none;
}

.template-homeservices-a .overlay-rma {
  display: none;
}

.template-homeservices-a .overlay-website {
  display: none;
}

.template-homeservices-a .overlay-custom-message {
  display: none;
}

.template-homeservices-a .overlay-recipient-name,
.template-homeservices-a .overlay-recipient-address {
  display: none;
}

.template-homeservices-a .overlay-phone {
  top: 8%;
  left: 25%;
  width: 50%;
  height: 12%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 6cqw, 32px);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.template-homeservices-a .overlay-offer {
  top: 55%;
  left: 10%;
  width: 35%;
  height: 20%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 8cqw, 48px);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.template-homeservices-a .overlay-logo {
  top: 3%;
  left: 3%;
  width: 20%;
  height: 15%;
}

/* ----------------------------------------
   TEMPLATE: Home Services Type B
   Products: Garage Door, Tree Service 1, Plumbing 5, Pest Control 7, Landscaping 3
   Phone at bottom, offer in middle
   ---------------------------------------- */
.template-homeservices-b .overlay-full-name,
.template-homeservices-b .overlay-rma,
.template-homeservices-b .overlay-website,
.template-homeservices-b .overlay-custom-message,
.template-homeservices-b .overlay-recipient-name,
.template-homeservices-b .overlay-recipient-address {
  display: none;
}

.template-homeservices-b .overlay-phone {
  top: 82%;
  left: 25%;
  width: 50%;
  height: 10%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 5cqw, 28px);
  font-weight: bold;
}

.template-homeservices-b .overlay-offer {
  top: 40%;
  left: 55%;
  width: 40%;
  height: 15%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #d32f2f;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 7cqw, 40px);
  font-weight: bold;
}

.template-homeservices-b .overlay-logo {
  top: 5%;
  left: 5%;
  width: 25%;
  height: 18%;
}

/* ----------------------------------------
   TEMPLATE: Home Services Type C
   Products: Lawn Care 1, Electrician 1, Garage Door 2
   Centered phone, side offer
   ---------------------------------------- */
.template-homeservices-c .overlay-full-name,
.template-homeservices-c .overlay-rma,
.template-homeservices-c .overlay-website,
.template-homeservices-c .overlay-custom-message,
.template-homeservices-c .overlay-recipient-name,
.template-homeservices-c .overlay-recipient-address {
  display: none;
}

.template-homeservices-c .overlay-phone {
  top: 75%;
  left: 5%;
  width: 45%;
  height: 12%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 4.5cqw, 24px);
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.template-homeservices-c .overlay-offer {
  top: 30%;
  left: 60%;
  width: 35%;
  height: 20%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #FFD700;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 8cqw, 44px);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.template-homeservices-c .overlay-logo {
  top: 3%;
  left: 70%;
  width: 25%;
  height: 15%;
}

/* ----------------------------------------
   TEMPLATE: Home Services Type D
   Products: Roof Leak, Water Leak, Toilet Repairs
   Compact phone at bottom, no offer overlay
   ---------------------------------------- */
.template-homeservices-d .overlay-full-name,
.template-homeservices-d .overlay-rma,
.template-homeservices-d .overlay-website,
.template-homeservices-d .overlay-custom-message,
.template-homeservices-d .overlay-recipient-name,
.template-homeservices-d .overlay-recipient-address,
.template-homeservices-d .overlay-offer {
  display: none;
}

.template-homeservices-d .overlay-phone {
  top: 85%;
  left: 30%;
  width: 40%;
  height: 10%;
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  color: #000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 5cqw, 26px);
  font-weight: bold;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  padding: 2px 8px;
}

.template-homeservices-d .overlay-logo {
  top: 5%;
  left: 5%;
  width: 25%;
  height: 15%;
}

/* ----------------------------------------