.ecpdpa-wrap{max-width:960px;margin:12px auto;padding:16px;border:1px solid #eee;border-radius:10px;background:#fff}
.ecpdpa-actions{margin-top:12px}
.ecpdpa-result{margin-top:12px}
.ecpdpa-error{color:#a00}
.ecpdpa-success{color:#0a0}

/* Inputs visible */
.ecpdpa-input{width:100%!important;padding:10px;border:2px solid #0078ff;border-radius:6px;background:#fff9e6;margin-bottom:8px;font-size:15px}

/* Admin mapper pages */
.ecpdpa-pages-wrap{max-width:900px}
.ecpdpa-page-holder{position:relative; margin:18px 0; border:1px solid #eee; padding:8px; border-radius:8px; background:#fafafa}
.ecpdpa-page-label{font-weight:600; margin-bottom:6px}
.ecpdpa-page-cont{position:relative}
.ecpdpa-overlay{position:absolute; top:0; left:0; pointer-events:none}
.ecpdpa-overlay .ecpdpa-box{position:absolute; background:rgba(0,120,255,0.15); border:1px dashed #0078ff; pointer-events:auto; cursor:move}
.ecpdpa-overlay .ecpdpa-box-sign{background:rgba(255,136,0,0.15); border-color:#ff8800}
.ecpdpa-del{position:absolute; right:-10px; top:-10px; background:#e00; color:#fff; width:20px; height:20px; border-radius:50%; line-height:20px; text-align:center; font-weight:700; cursor:pointer;}
.ecpdpa-label{position:absolute; left:4px; top:-18px; background:#0078ff; color:#fff; font-size:11px; line-height:1; padding:3px 6px; border-radius:4px;}

/* Public page */
.ecpdpa-pages-wrap .ecpdpa-page-holder{position:relative; margin:18px 0;}
.ecpdpa-pages-wrap .ecpdpa-page-cont{position:relative}
.ecpdpa-pages-wrap canvas{border:1px solid #ddd; border-radius:6px}
.ecpdpa-pages-wrap .ecpdpa-overlay{top:0; left:0; pointer-events:none}
.ecpdpa-inline-input{position:absolute; pointer-events:auto; padding:4px 6px; border:1px solid #bbb; border-radius:4px; background:#fff; font-size:14px; width:220px}
.ecpdpa-sign-box{position:absolute; pointer-events:auto; border:2px dashed #ff8800; background:rgba(255,136,0,0.08); display:flex; align-items:center; justify-content:center; color:#ff8800; font-weight:600; cursor:pointer}
.ecpdpa-sign-box.signed{border-color:#2f9e44; color:#2f9e44; background:rgba(47,158,68,0.08)}
.ecpdpa-sign-box .hint{pointer-events:none}

/* Signature modal */
.ecpdpa-sig-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); z-index:9999}
.ecpdpa-sig-modal.show{display:flex}
.ecpdpa-sig-modal .inner{background:#fff; padding:16px; border-radius:10px; width:680px; max-width:95%}
.ecpdpa-sig-modal canvas{width:100%; height:160px; border:1px solid #ccc; border-radius:6px; margin:8px 0}
.ecpdpa-sig-modal .row{display:flex; gap:8px; justify-content:flex-end}

/* v143a CSS fix: make public canvases fluid width */
.ecpdpa-page-cont canvas,
canvas[id^="ecpdpa-public-canvas"] {
  width: 100% !important;
  height: auto !important;
  display: block;
}


/* v143a mobile fixes for sign box + inline inputs */
@media (max-width: 768px) {
  div.ecpdpa-sign-box,
  input.ecpdpa-inline-input {
    max-width: 95% !important;   /* keep within viewport */
    left: 2% !important;         /* small side margin */
    right: auto !important;
  }

  div.ecpdpa-sign-box {
    font-size: 14px !important;
    min-height: 40px !important;
  }

  input.ecpdpa-inline-input {
    font-size: 14px !important;
    padding: 6px !important;
  }
}

.ecpdpa-basic label{display:block;margin:8px 0;}
.ecpdpa-basic input.ecpdpa-input{width:100%;max-width:420px}
.ecpdpa-existing legend{font-weight:600;margin-top:10px}

/* === ECGA admin mapper styles (for the Mapper screen) === */
.ecga-pages-wrap { max-width: 900px; }
.ecga-page-holder { position: relative; margin: 18px 0; border: 1px solid #eee; padding: 8px; border-radius: 8px; background: #fafafa; }
.ecga-page-label { font-weight: 600; margin-bottom: 6px; }
.ecga-page-cont { position: relative; }

/* Overlay above the canvas; the boxes themselves receive pointer events */
.ecga-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* Draggable boxes created by the Mapper JS */
.ecga-overlay .ecga-box {
  position: absolute;
  background: rgba(0,120,255,0.15);
  border: 1px dashed #0078ff;
  pointer-events: auto;   /* allow dragging */
  cursor: move;
}
.ecga-box.ecga-box-sign {
  background: rgba(255,136,0,0.15);
  border-color: #ff8800;
}

/* Field label (badge) and delete “×” */
.ecga-label {
  position: absolute;
  left: 4px; top: -18px;
  background: #0078ff; color: #fff;
  font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 4px;
}
.ecga-del {
  position: absolute;
  right: -10px; top: -10px;
  background: #e00; color: #fff;
  width: 20px; height: 20px; line-height: 20px;
  border-radius: 50%; text-align: center;
  font-weight: 700; cursor: pointer;
  z-index: 3;
}
.ecga-del:hover { background: #b00; }



/* === ECGA public page styles (frontend) === */
.ecga-wrap { max-width: 960px; margin: 12px auto; padding: 16px; border: 1px solid #eee; border-radius: 10px; background: #fff; }
.ecga-actions { margin-top: 12px; }
.ecga-result { margin-top: 12px; }
.ecga-error { color: #a00; }
.ecga-success { color: #0a0; }
.ecga-input { width: 100% !important; padding: 10px; border: 2px solid #0078ff; border-radius: 6px; background: #fff9e6; margin-bottom: 8px; font-size: 15px; }

.ecga-pages-wrap .ecga-page-holder { position: relative; margin: 18px 0; }
.ecga-pages-wrap .ecga-page-cont { position: relative; }
.ecga-pages-wrap canvas { border: 1px solid #ddd; border-radius: 6px; }
.ecga-pages-wrap .ecga-overlay { top: 0; left: 0; pointer-events: none; }

.ecga-inline-input { position: absolute; pointer-events: auto; padding: 4px 6px; border: 1px solid #bbb; border-radius: 4px; background: #fff; font-size: 14px; width: 220px; }

.ecga-sign-box { position: absolute; pointer-events: auto; border: 2px dashed #ff8800; background: rgba(255,136,0,0.08); display: flex; align-items: center; justify-content: center; color: #ff8800; font-weight: 600; cursor: pointer; }
.ecga-sign-box.signed { border-color: #2f9e44; color: #2f9e44; background: rgba(47,158,68,0.08); }
.ecga-sign-box .hint { pointer-events: none; }

.ecga-sig-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 9999; }
.ecga-sig-modal.show { display: flex; }
.ecga-sig-modal .inner { background: #fff; padding: 16px; border-radius: 10px; width: 680px; max-width: 95%; }
.ecga-sig-modal canvas { width: 100%; height: 160px; border: 1px solid #ccc; border-radius: 6px; margin: 8px 0; }
.ecga-sig-modal .row { display: flex; gap: 8px; justify-content: flex-end; }

#ecga-public-pages canvas { width: 100% !important; height: auto !important; display: block; }

@media (max-width: 768px) {
  div.ecga-sign-box,
  input.ecga-inline-input {
    max-width: 95% !important;
    left: 2% !important;
    right: auto !important;
  }
  div.ecga-sign-box { font-size: 14px !important; min-height: 40px !important; }
  input.ecga-inline-input { font-size: 14px !important; padding: 6px !important; }
}