/* =========================================================
   PROOF – BROWSER PREVIEW (DOUBLE PAGE SPREAD)
========================================================= */

.cc-proof-preview {
  margin-top: 10px;
}

/* Outer “book” wrapper – size is controlled per layout */
.cc-proof-book {
  position: relative;
  margin: 16px auto 4px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  display: flex;
  overflow: hidden;
}

/* Portrait: left/right pages side-by-side
   CURRENT SIZE = 600px wide × 400px high */
.cc-proof-book.cc-layout-portrait {
  flex-direction: row;
  width: 600px;
  height: 400px;
}

/* Landscape: pages stacked top/bottom
   CURRENT SIZE = 400px wide × 500px high */
.cc-proof-book.cc-layout-landscape {
  flex-direction: column;
  width: 400px;
  height: 600px;
}

/* =========================
   SQUARE (ADDED ONLY)
   WHOLE preview = 500px wide × 500px high (side-by-side)
========================= */
.cc-proof-book.cc-layout-square {
  flex-direction: row;
  width: 600px;
  height: 300px;
}

/* Individual pages */
.cc-proof-page {
  position: relative;
  flex: 1;
  background: #ffffff;
}

/* Page borders vary by layout */
.cc-layout-portrait .cc-page-left {
  border-right: 1px solid #ddd;
}
.cc-layout-portrait .cc-page-right {
  border-right: 0;
}
.cc-layout-landscape .cc-page-left {
  border-bottom: 1px solid #ddd;
}
.cc-layout-landscape .cc-page-right {
  border-bottom: 0;
}

/* =========================
   SQUARE (ADDED ONLY) borders
========================= */
.cc-layout-square .cc-page-left {
  border-right: 1px solid #ddd;
}
.cc-layout-square .cc-page-right {
  border-right: 0;
}

/* ---------------------------------------------------------
   RIGHT PAGE – TEXT LAYOUT (greeting, under, name, footer)
--------------------------------------------------------- */

.cc-proof-text-wrap {
  position: absolute;
  inset: 10% 12%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}

.cc-proof-text-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cc-proof-block {
  margin: 2px 0;
}

.cc-proof-block-main,
.cc-proof-block-under,
.cc-proof-block-name {
  margin-top: 0px;
}

/* Footer/address block pinned to bottom */
.cc-proof-block-footer {
  margin-top: auto;
  padding-top: 10px;
}

/* ---------------------------------------------------------
   LEFT PAGE – CHARITY LOGO
--------------------------------------------------------- */

.cc-proof-charity {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  text-align: center;
}

.cc-proof-charity img {
  display: block;
  max-height: 55px;
  width: auto;
  margin: 0 auto 2px;
}

.cc-proof-charity-name {
  font-size: 10px;
  line-height: 1.2;
  margin: 0;
}
.cc-card-typeface .cc-typeface-sample{
  padding: 14px 14px;
  line-height: 1.45;
}

/* =========================================================
   PROOF (PORTRAIT) – lock greeting + footer + charity positions
========================================================= */

/* Ensure pages are the positioning context */
.cc-proof-page { position: relative; }

/* Make the right-page text-wrap span the full page so "bottom:10px" is true bottom */
.cc-layout-portrait .cc-page-right .cc-proof-text-wrap{
  inset: 0;                 /* override inset: 10% 12% */
  padding: 0 12%;           /* keep your side margins */
}

/* Start greeting block about 1/3 down the page */
.cc-layout-portrait .cc-page-right .cc-proof-text-inner{
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 50%;         /* ~one third down */
  box-sizing: border-box;
}

/* Pin footer 10px from the bottom of the PAGE */
.cc-layout-portrait .cc-page-right .cc-proof-block-footer{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}

/* Pin charity logo 10px from the bottom of the PAGE */
.cc-layout-portrait .cc-page-left .cc-proof-charity{
  position: absolute;
  left: 50%;
  bottom: 10px;             /* override bottom: 10% */
  transform: translateX(-50%);
  text-align: center;
}

/* =========================================================
   PROOF (LANDSCAPE) – lock greeting + footer + charity positions
========================================================= */

/* Ensure pages are the positioning context */
.cc-proof-page {
  position: relative;
}

/* Make the right-page text-wrap span the full page height */
.cc-layout-landscape .cc-page-right .cc-proof-text-wrap{
  inset: 0;                 /* override inset values */
  padding: 0 12%;           /* keep horizontal margins consistent */
}

/* Start greeting block about 1/3 down the RIGHT (bottom) page */
.cc-layout-landscape .cc-page-right .cc-proof-text-inner{
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 25%;         /* adjust to 33% if you want higher */
  box-sizing: border-box;
}

/* Pin footer 10px from the bottom of the RIGHT (bottom) page */
.cc-layout-landscape .cc-page-right .cc-proof-block-footer{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}

/* Pin charity logo 10px from the bottom of the LEFT (top) page */
.cc-layout-landscape .cc-page-left .cc-proof-charity{
  position: absolute;
  left: 50%;
  bottom: 10px;             /* override any % positioning */
  transform: translateX(-50%);
  text-align: center;
}

.cc-layout-landscape .cc-page-right .cc-proof-text-inner{
  padding-bottom: 60px; /* reserves space above the footer */
}

.cc-layout-portrait .cc-page-right .cc-proof-text-inner{
  padding-bottom: 60px; /* reserves space above the footer */
}

/* =========================
   SQUARE (ADDED ONLY)
   Same lock behaviour as PORTRAIT (side-by-side), only sizing differs.
========================= */
.cc-layout-square .cc-page-right .cc-proof-text-wrap{
  inset: 0;
  padding: 0 12%;
}

.cc-layout-square .cc-page-right .cc-proof-text-inner{
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 33%;
  box-sizing: border-box;
  padding-bottom: 60px; /* reserves space above the footer */
}

.cc-layout-square .cc-page-right .cc-proof-block-footer{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}

.cc-layout-square .cc-page-left .cc-proof-charity{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  text-align: center;
}

/* =========================================================
   UPLOADS ON PROOF (ADDED ONLY)
   Fix: logo must sit ABOVE pinned footer (no overlap)
========================================================= */

/* Keep uploaded images sensible */
.cc-proof-upload-logo img{
  display:block;
  max-height:55px;
  width:auto;
  margin:0 auto;
}
.cc-proof-upload-signature img{
  display:block;
  max-height:45px;
  width:auto;
  margin:0 auto;
}

/* When footer is pinned absolute, pin the uploaded LOGO above it */
.cc-layout-portrait  .cc-page-right .cc-proof-upload-logo,
.cc-layout-landscape .cc-page-right .cc-proof-upload-logo,
.cc-layout-square    .cc-page-right .cc-proof-upload-logo{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 42px;            /* sits above footer (footer is at 10px) */
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Reserve extra space so main text never runs into the pinned logo/footer area */
.cc-layout-portrait  .cc-page-right .cc-proof-text-inner,
.cc-layout-landscape .cc-page-right .cc-proof-text-inner,
.cc-layout-square    .cc-page-right .cc-proof-text-inner{
  padding-bottom: 110px;   /* overrides earlier 60px, keeps logo + footer clear */
}