/* Shared site styles for ePass project */
@import url('https://fonts.googleapis.com/css2?family=OCRAExtended&family=Roboto+Mono&display=swap');

body { font-family: 'Arial', sans-serif; background-color: #f0f2f5; }

.printable-area { width:210mm; min-height:297mm; box-sizing:border-box; font-family:'OCRAExtended', sans-serif; }
.font-mono { font-family: 'Roboto Mono', monospace; }
.form-input { border: 1px solid #d1d5db; padding: 2px 4px; border-radius: 4px; width: 100%; background-color: #f9fafb; }

/* Watermark: tuned for better on-screen visibility */
.watermark {
  /* Center watermark reliably inside its positioned parent */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  opacity: 0.30;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.watermark img {
  /* keep the watermark centered and contained */
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  opacity: 0.8;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Modal & loader helpers */
.modal-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:50; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/* PRINT STYLES - keep behavior similar to originals */
@media print {
  body { background-color: white !important; margin:0; padding:0; }
  .no-print { display: none !important; }
  .printable-area { width:100%; height:100vh; box-shadow:none !important; border:none !important; padding:1.5cm; margin:0; font-size:10pt; }
  .form-input { border:none !important; background-color:white !important; padding:0 !important; }
  .watermark { display:block !important; }
}