body { font-family: sans-serif; padding: 0px; background: #ffffff; }
.header-wrapper {display:flex; gap:30px; align-items:center; margin-bottom:20px;}
/* ALL dimensions must be 400x400 to prevent squishing */
.body-canvas-container { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    border: 2px solid #333;
    background-color: #fff;
    margin: 0 auto;
}
.signature-canvas-container { 
    position: relative; 
    width: 400px; 
    height: 200px; 
    border: 1px solid #333;
    background-color: #fff;
    margin: 0 auto;
}

#painCanvas { 
    position: absolute;
    top: 0; left: 0;
    width: 400px; height: 400px; 
    cursor: crosshair; 
    touch-action: none; /* Crucial for mobile */
    z-index: 5;
}

#bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 400px; height: 400px;
    object-fit: contain;
    z-index: 1;
}

.controls { text-align: center; margin-top: 15px; }
.button { padding: 10px 25px; cursor: pointer; background: #2927b2; color: white; border: none; border-radius: 5px; }

.preview-box { margin-top: 30px; border-top: 1px solid #ccc; padding-top: 20px; }
#finalPreview { max-width: 200px; border: 1px solid #000; display: block; margin-top: 10px; background: white; }

.signaturebox { text-align:left;}
.lock-this-field input,
.lock-this-field textarea {
background-color: #F4F4F4 !important; /* Makes it look greyed out */
pointer-events: none;                /* Prevents clicking/typing */
cursor: not-allowed;                 /* Shows a "no entry" icon on hover */
user-select: none;                   /* Prevents highlighting text */
}

.signature-wrapper { display:flex; }
/* --- Desktop & Tablet (Left Aligned) --- */
.signature-wrapper canvas {
display: block;
border: 1px solid #ccc;
background-color: #fff;
width: 400px; /* Fixed width for professional look on desktop */
height: 200px;
margin-left: 0; /* Ensures it stays to the left */
}
/* --- Mobile signature canvas --- */
@media screen and (max-width: 480px) {
  .header-wrapper {display:grid; align-items:center; margin-bottom:20px;}
  .signature-wrapper canvas {
    width: 250px !important;
    height: 125px;
    max-width: 100%;
  }

  .body-canvas-container {
    width: 250px;
    height: 250px;
  }

  .signature-canvas-container {
    width: 250px;
    height: 125px;
  }

  #painCanvas,
  #bg-layer {
    width: 250px;
    height: 250px;
  }
}