@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 :root{--pane:380px;--header:56px;color-scheme:dark}
  *{
    box-sizing:border-box;
    font-family: "Montserrat", sans-serif;
  } 
  html,body{ font-family: "Montserrat", sans-serif;}
  body {
  margin: 0;
  padding: 0;
}

  body{margin:0;}
  
  header{height:var(--header);display:flex;align-items:center;gap:10px;padding:0 12px;background:#1f1f1f;border-bottom:1px solid #333; display: none;}
  header h1{margin:0;font-size:16px;font-weight:600}
  header .spacer{flex:1}
  header .btn{padding:8px 10px;border:1px solid #3a3a3a;background:#2a2a2a;border-radius:8px;color:#fff;cursor:pointer}
  

  #showController{
    position: fixed;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: transparent;
    z-index: 999;
    cursor: pointer;
  }

  .main{
    flex:1;
    min-height:0;
    display: none;
    width: 100%;
    /* max-width: 1080px; */
    height: 1440px;
    margin: 0 auto;
    background: url(../images/bg1.png) top center no-repeat;
    background-size: 100%;
    justify-content: center;
  }
  
  .stage{
    position:relative;
    width: 100%;
    height: 1440px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
  }
  
  .mainArea{
    width: 725px;
    height: 1156px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  
  #c{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
  #v{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);border:1px solid #555;padding:4px 8px;border-radius:999px;font-size:12px;z-index:5;display:none}
  .badge.live{display:inline-block}
  .warn{position:absolute;inset:auto 10px 10px 10px;background:rgba(255,65,65,.92);color:#fff;padding:10px;border-radius:8px;font-weight:600;z-index:6;display:none}
  .dbg{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);padding:6px 8px;border-radius:8px;font:12px/1.2 ui-monospace,Consolas;color:#bde}
  
  aside.panel{
    border-left:1px solid #333;
    background:#191919;
    overflow:auto;
    padding:10px; 
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
  }

  aside.panel.open { display: block; }

  .card{background:#222;border:1px solid #333;border-radius:10px;padding:10px;margin:10px 0}
  label{display:block;font-size:12px;margin:6px 0}
  input[type="range"],input[type="text"],textarea,select,input[type="color"]{width:100%}
  textarea{min-height:58px;resize:vertical}
  .row{display:flex;gap:8px;flex-wrap:wrap} .row>*{flex:1}
  button,select,input[type="file"]{border:1px solid #3a3a3a;background:#2a2a2a;color:#fff;border-radius:8px;padding:8px;cursor:pointer}
  button:active{transform:translateY(1px)} .hint{opacity:.75;font-size:12px}
  .val{display:inline-block;min-width:48px;text-align:right;margin-left:6px;opacity:.9;font-variant-numeric:tabular-nums}
  .tag{display:inline-block;padding:.2rem .5rem;border:1px solid #444;border-radius:999px;background:#1a1a1a;font-size:12px;margin-top:6px}

  #qbSnap{
    position: relative;
    width: 154px;
    height: 154px;
    border: 1px solid #b09276;
    border-radius: 100%;
    background: none;
    justify-content: center;
    align-items: center;
  }
  #qbSnap::before{
    content: '';
    position: absolute;
     width: 106px;
    height: 106px;
    background-color: #fff;
    border-radius: 100%;
  }
  .qbSnapClick{
    background: #fff !important;
  }

  #qbStartCam{
    border: 1px solid #b09276;
    font-size: 18px;
    height: 48px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0a1240;
    text-transform: uppercase;
    background: none;
    border-radius: 0;
    margin-right: 15px;
  }
  #qbDownload{
    border: 1px solid #b09276;
    height: 48px;
    width: 150px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0a1240;
    text-transform: uppercase;
    background: none;
    border-radius: 0;
    margin-left: 15px;
  }

  .printDiv{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .nextDiv{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .startDiv{
    display: flex;
    justify-content: center;
    margin-top: 60px;
  }

  #qbPrint{
    border: 1px solid #b09276;
    height: 58px;
    width: 340px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0a1240;
    text-transform: uppercase;
    background: none;
    border-radius: 0;
    color: #fff;
  }

  #nextPrint{
    border: 1px solid #b09276;
    height: 58px;
    width: 340px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0a1240;
    text-transform: uppercase;
    background: none;
    border-radius: 0;
    color: #fff;
  }

  #startAgain{
    border: 1px solid #b09276;
    height: 90px;
    width: 390px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0a1240;
    text-transform: uppercase;
    background: none;
    border-radius: 0;
    color: #fff;
  }
  

  /* === Palm Countdown Overlay === */
  /* Center the countdown number exactly in the stage */
.countdown {
  background: url(../images/countBg.png) center no-repeat;
  background-size: 100%;
  width: 340px;
  height: 375px;
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -47%);  /* <- true center */
  z-index: 8;
  pointer-events: none;
  text-align: center;
  font-size: 122px;
  font-weight: normal;
  /* align digits nicely (01, 02 …) if you ever show two digits */
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .15s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.countdown.show { opacity: 1; }

.capturingPhoto{
  position: absolute;
  width: 100%;
  /* bottom: 560px; */
  bottom: 300px;
  text-transform: uppercase;
  color: #fff;
  font-size: 28px;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

  .qr-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:50}
  .qr-card{width:min(92vw,420px);background:#1e1e1e;border:1px solid #333;border-radius:14px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .qr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .qr-head h3{margin:0;font-size:16px;font-weight:700}
  .xbtn{border:1px solid #3a3a3a;background:#2a2a2a;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
  .qr-code{display:grid;place-items:center;padding:8px;margin:8px auto;background:#111;border-radius:10px}
  .qr-link{font:12px/1.2 ui-monospace,Consolas;color:#9ad;word-break:break-all;text-align:center;margin:6px 0}
  .qr-actions{display:flex;gap:10px;justify-content:center;margin-top:8px}
  [hidden] { display: none !important; }


  .welcomeScreen{
    width: 100%;
    height: 1440px;
    max-width: 960px;
    box-sizing: border-box;
    padding: 20px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    flex-direction: column;
    margin: 0 auto;
    background: url(../images/bg1.png) top center no-repeat;
    background-size: 100%;
  }

  .welcomeText{
    width: 725px;
    height: 1156px;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../images/bg2.png) 0 0 no-repeat;
    background-size: 100%;
  }

  .welcomeText p{
    text-align: center;
    color: #ffffff;
    font-size: 42px;
    line-height: 70px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
  }

  .welcomeText label{
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
    padding: 10px 0;
    display: flex;
  }

  .welcomeText label span{
    width: 34px;
    height: 34px;
    display: block;
    border: 1px solid #9e846d;
    margin-right: 20px;
    margin-top: 5px;
  }
  .welcomeText label span input{
    opacity: 0;
  }
  .welcomeText label span.tick{
    background: url(../images/tick.png) center no-repeat;
    background-size: 70%;
  }
  .welcomeText label strong{
    flex: 1;
    font-weight: normal;
  }


  .startBtn[disabled], 
  #qbPrint[disabled],
  #nextPrint[disabled] { 
    opacity: .2; cursor: not-allowed; 
  }
  .err { color: #c00; margin: 8px 0 0; font-weight: 600; }

  

  .buttonsDiv{
    position: absolute;
    z-index: 99;
    display: flex;
  }

  .startBtn{
    width: 320px;
    height: 74px;
    background: transparent;
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #a78c73;
    border-radius: 0;
    margin: 40px 0;
  }

  .capturePhoto{
    /* font-size: 50px;
    line-height: 90px; 
    bottom: 500px;*/
    font-size: 28px;
    line-height: 50px;
    text-transform: uppercase;
    color: #ffffff;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 250px;
    display: none;
  }

  .quickbar{
    position: absolute;
    bottom: 20px; 
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .snapDiv{
    position: absolute;
    bottom: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #liveBadge,
  #httpsWarn,
  #dbg{
    display: none;
  }


.qrcodeDiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height:  100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  flex-direction: column;
  margin: 0 auto;
  z-index: 9999;
}

.qrcodeDiv[hidden] { display: none; }

.thankyouDiv{
  position: absolute;
  inset: 0;
  width: 100%;
  height:  100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  flex-direction: column;
  margin: 0 auto;
  z-index: 9999;
}

.thankyouDiv[hidden] { display: none; }

.thankyouCard{
  position: relative;
  width: 725px;
  height: 1156px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(../images/bg2.png) 0 0 no-repeat;
  background-size: 100%;
}

.thankyouCard h3{
  text-align: center;
  color: #ffffff;
  font-size: 38px;
  line-height: 70px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-weight: normal;
}

.thankyouCard h3 span{
  font-size: 50px;
}

.thankyouContent{
  margin-top: 60px;
}

.thankyouContent p{
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  padding: 0;
  margin: 0;
}
.thankyouImg{
  margin: 50px 0;
  display: flex;
  justify-content: center;
}
.thankyouImg img{
  max-width: 100%;
  width: 290px;
}


.qrCard {
  position: relative;
  width: 725px;
  height: 1156px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(../images/bg2.png) 0 0 no-repeat;
  background-size: 100%;
}

.qrCard h3{
  text-align: center;
  color: #ffffff;
  font-size: 42px;
  line-height: 70px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-weight: normal;
}

.qrClose {
  position: absolute;
  top: 8px; right: 8px;
  border: 0; background: transparent;
  font-size: 22px; line-height: 1;
  cursor: pointer;
}

.qrCanvas { 
  margin-top: 30px;
  width: 329px; 
  height: 332px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.qrCanvas img{
  border: 10px solid #fff;
}

.qrNote { margin: 8px 0 16px; color: #333; font-size: 14px; }
.qrActions { display: flex; gap: 10px; justify-content: center; }
.qrActions .qrOpenBtn,
.qrActions button {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111; color: #fff;
  font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.qrActions button { background: #fff; color: #111; }

#qrOpen2[aria-disabled="true"] {
  background: #aaa !important;
  cursor: not-allowed;
}
#qrOpen2.ready {
  background: #111 !important;
  cursor: pointer;
}

.termsMain{
  background:url('../images/bg1.png') top center no-repeat;
  background-size: cover;
  padding: 20px;
  max-width:420px;
  height: 100vh;
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.terms{
  background: rgba(0,0,0,0.8);
  width: 100%;
  padding: 20px;
  height: 620px;
  overflow-y: scroll;
}
.terms h2{
  color: #fff;
  font-size: 14px;
  padding: 0;
  margin-bottom: 20px;
}

.terms h3{
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  margin-bottom: 20px;
}

.terms p{
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 0;
  margin: 0;
}

.terms ul{
  margin: 10px 20px;
  padding: 0;
}

.terms ul li{
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 0;
  margin: 0;
}

#panelController{
  position: relative;
  z-index: 9999;
  top: 100px;
}

@page {
  size: 4in 6in;  /* postcard size */
  margin: 0;
}

img, canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



  @media print {
    header, aside.panel, .quickbar, .badge, .warn, #dbg, #v { display: none !important; }
    @page { margin: 0; }                 
    html, body { background:#fff; margin: 0; padding: 0; }
    .stage { background:#fff !important; }
    /* #c { display:block; width:100% !important; height:auto !important; } */
    #c { width: 100vw !important; height: 100vh !important; }
  }

  @media print { .qr-modal{display:none !important} }

  @media print {
  .no-print { display: none !important; }

  /* Optional: if someone hits Ctrl+P on the main page instead of using printPostcard(),
     make the canvas take the page cleanly and avoid stray margins/headers/footers. */
  @page { margin: 0; }
  html, body { margin: 0; padding: 0; background: #fff; }
}