/* style.css */

/* Global */
body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  padding: 20px;
  display: flex;
  justify-content: center;
}

/* Container */
.container {
  width: 100%;
  max-width: 800px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  text-align: center;
  z-index: 2;
}
h1 {
  color: #014a8f;
  font-size: 1.6em;
  margin-bottom: 20px;
}

/* Landing */
.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background: #f9f9f9;
  z-index: 0;
}
.logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 10%;
}
@media (min-width: 768px) {
  .logo { width: 50%; max-width: 300px; }
}
@media (min-width: 1200px) {
  .logo { width: 100%; max-width: 500px; }
}


.banklogo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: -7%;
}
@media (min-width: 768px) {
  .banklogoo { width: 50%; max-width: 300px; }
}
@media (min-width: 1200px) {
  .banklogo { width: 75%; max-width: 400px; }
}

#startBtn {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #014a8f;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#startBtn:hover { background-color: #e65c00; }

/* Media selection */
.media-select h2 { font-size: 1.1em; margin-bottom: 10px; }
.options button {
  margin: 5px; padding: 8px 12px;
  font-size: 14px; border: none;
  background: #ccc; border-radius: 5px; cursor: pointer;
}
.options button.active {
  background: #014a8f; color: white;
}

/* Custom panel */
.custom-panel { margin-top: 20px; text-align: center; }
.custom-upload,
.color-picker { margin-top: 10px; }
#uploadPhoto,
#fontColor { margin-top: 8px; }

/* Card */
.card {
  position: relative;
  width: 330px; height: 495px;
  margin: 20px auto;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  background: black;
}
#bgImage, #bgVideo {
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
}
.overlay-box {
  position: absolute;
  bottom: 12%;
  width: calc(100% - 20px);
  background: rgba(0,0,0,0.0);
  color: white;
  font-size: 1.1em;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}
.footer-text {
  position: absolute; bottom:10px;
  width:100%; text-align:center;
  color:white; font-size:0.95em;
  text-shadow:1px 1px 3px black;
}
.footer-text div { margin:2px 0; }

/* Inputs */
.input-fields {
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.input-fields label {
  font-weight:bold;
  margin-bottom:5px;
}
.input-fields input,
.input-fields select {
  padding:10px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:8px;
  width:100%;
  max-width:280px;
  margin-bottom:10px;
}

/* Actions */
.actions {
  margin:20px 0;
}
.actions button,
.actions a {
  padding:10px 16px;
  font-size:14px;
  background:#014a8f;
  color:white;
  border:none;
  border-radius:5px;
  cursor:pointer;
  margin:5px;
  text-decoration:none;
}
.actions a { background:#25D366; }
.actions button:hover,
.actions a:hover { background-color:#e65c00; }

.custom-panel {
  margin: 20px 0;
  text-align: center;
}
.color-picker,
.custom-upload {
  margin-top: 8px;
}

.consent {
  margin: 20px 0;
  text-align: center;
  font-size: 0.7em;
  color: #666;    /* gray text */
}

.consent input {
  margin-right: 8px;
}

.footer-note {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8em;
  color: #666;
}
.footer-note .footer-logo {
  width: 30px;
  height: auto;
  display: block;l
  margin: 0 auto 5px;
}

.inline-logo {
  width: 100px;
  height: auto;
  vertical-align: text-bottom;
  margin: 0 4px;
}

#leaf-container {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 1;
}

.leaf {
  position: absolute;
  top: -50px;
  width: 30px; height: 30px;
  background: url('bodhi-leaf.png') no-repeat center/contain;
  opacity: 0.8;
  animation-name: fall;
  animation-timing-function: linear;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0.4;
  }
}

/* center content responsively */
.overlay-content {
  text-align: center;
  width: 90%;
  max-width: 300px;
  padding: 1rem;
  background: rgba(0,0,0,0.8);
  border-radius: 8px;
}

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

/* hide it by default */
.hidden {
  display: none;
}

/* the little “card” in the middle */
.overlay-content {
  background: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  width: 90%;        /* nearly full on mobile */
  max-width: 400px;  /* limited width on desktop */
  box-sizing: border-box;
}

/* progress bar wrapper */
.progress-bar {
  margin-top: 1rem;
  width: 100%;
  height: 8px;
  background: #444;
  border-radius: 4px;
  overflow: hidden;
}

/* the fill element */
#progressFill {
  width: 0%;
  height: 100%;
  background: #0f0;
  transition: width 0.1s linear;
}