/* VowSign custom PDF documents: editor (vendor) + signing page (client). Colours come from the host page's --wine/--gold/--line vars. */
.dp-view{max-width:1180px;margin:0 auto;padding:22px 20px 80px}
.dp-card{background:#fff;border:1px solid var(--line,#e2d6cb);border-radius:21px;padding:34px;max-width:780px;margin:26px auto 0}
.dp-card h1{font-size:34px;font-weight:400;margin:10px 0}
.dp-doc{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line,#e2d6cb)}
.dp-doc b{font-weight:600}.dp-doc .muted{font-size:12.5px}
.dp-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dp-title{flex:1;min-width:180px;border:1px solid transparent;background:transparent;font:600 18px var(--sans,system-ui);padding:7px 10px;border-radius:10px;color:inherit}
.dp-title:hover,.dp-title:focus{border-color:var(--line,#e2d6cb);background:#fff;outline:none}
.dp-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}
.dp-stage{display:flex;flex-direction:column;gap:16px;align-items:center}
.dp-stage.armed .dp-page{cursor:crosshair}
.dp-page{position:relative;width:100%;max-width:860px;background:#fff;box-shadow:0 6px 28px #3a1f2a22;border-radius:3px;overflow:visible;user-select:none;-webkit-user-select:none}
.dp-page canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:3px;display:block}
.dp-layer{position:absolute;inset:0}
.dp-pno{position:absolute;right:8px;top:-17px;font-size:11px;color:#8a7d78}
.dp-side{position:sticky;top:14px}
.dp-seg{display:flex;gap:4px;background:var(--cream,#f1e9e1);padding:3px;border-radius:99px}
.dp-seg button{flex:1;border:0;background:transparent;border-radius:99px;padding:8px 10px;font:600 13px var(--sans,system-ui);cursor:pointer;color:inherit}
.dp-seg button.on{background:#fff;box-shadow:0 1px 4px #0002}
.dp-f{position:absolute;box-sizing:border-box;border:1.5px solid #2f6fa8;background:#2f6fa81c;border-radius:4px;cursor:move;touch-action:none;display:flex;align-items:center;justify-content:center;min-width:14px;min-height:10px}
.dp-f.p-vendor{border-color:#b0762f;background:#b0762f1d}
.dp-f.opt{border-style:dashed}
.dp-f.sel{outline:2px solid var(--wine,#612f42);outline-offset:1px;z-index:5}
.dp-ft{font:600 10px var(--sans,system-ui);color:#1d4f7c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;padding:0 3px}
.dp-f.p-vendor .dp-ft{color:#7a4c14}
.dp-rs{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#fff;border:2px solid var(--wine,#612f42);border-radius:3px;cursor:nwse-resize;display:none}
.dp-f.sel .dp-rs{display:block}
.dp-tb{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:2px;background:#2b1a22;border-radius:8px;padding:3px;z-index:9;box-shadow:0 4px 14px #0004}
.dp-tb button{border:0;background:transparent;color:#fff;font:600 11.5px var(--sans,system-ui);padding:5px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.dp-tb button:hover{background:#ffffff26}
.field-row.sel{background:var(--goldp,#f6ead6);border-radius:8px}
.field-row{cursor:pointer}
.dp-modal{position:fixed;inset:0;background:#2b1a2299;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.dp-mbox{background:#fffefa;border-radius:18px;padding:26px;width:100%;max-width:440px;max-height:94vh;overflow:auto;box-shadow:0 24px 70px #0005}
.dp-mbox h2{font:400 26px var(--display,Georgia,serif);margin:6px 0 14px}
.dp-mbox input,.dp-mbox textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#e2d6cb);border-radius:11px;padding:11px 13px;font:15px var(--sans,system-ui);margin-top:4px;background:#fff}
.dp-mbox .ci-f{display:block;font-size:12.5px;color:#786e6b;margin-top:11px}
.dp-mbox .modal-actions{display:flex;gap:10px;margin-top:18px}.dp-mbox .modal-actions .btn{flex:1;min-height:46px}
.dp-chk{display:flex;gap:8px;align-items:center}.dp-chk input{width:auto;margin:0}
.dp-err{color:#b65660;font-size:13px;margin-top:10px}
.dp-link{font-size:13px}
.sg-prev{font:italic 700 44px/1.3 'Times New Roman',Times,serif;color:#14196b;text-align:center;min-height:62px;margin-top:10px;word-break:break-word;border-bottom:1px solid var(--line,#e2d6cb)}
#sgPad{width:100%;height:auto;aspect-ratio:640/220;border:1px dashed #a89a93;border-radius:12px;background:#fff;margin-top:10px;display:block}
#sgClear{margin-top:6px}
/* signing page */
.sp-main{max-width:900px;margin:0 auto;padding:22px 12px 150px}
.sp-head{text-align:center;margin-bottom:18px}.sp-head h1{font:400 30px/1.2 var(--display,Georgia,serif);margin:8px 0}
.sp-stage{display:flex;flex-direction:column;gap:14px;align-items:center}
.sp-f{position:absolute;box-sizing:border-box;border:2px solid #d9a441;background:#fff3cf8f;border-radius:5px;display:flex;align-items:center;justify-content:center;padding:0;font:inherit;cursor:pointer;overflow:hidden;min-width:16px}
.sp-f::after{content:'';position:absolute;inset:-12px}
.sp-f.opt{border-style:dashed;background:#f1f1f18f;border-color:#a8a8a8}
.sp-f.filled{border-color:#3d765f;background:#3d765f12}
.sp-f.sp-vendor{border:0;background:transparent;cursor:default}
.sp-f.sp-vendor::after{display:none}
.sp-f.pulse{animation:spPulse .8s ease 2}
@keyframes spPulse{0%,100%{box-shadow:0 0 0 0 #d9a44100}50%{box-shadow:0 0 0 8px #d9a44166}}
.sp-ph{font:700 clamp(8px,1.5vw,12px) var(--sans,system-ui);color:#8a5d12;text-transform:uppercase;letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.sp-f img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.sp-sig{font:italic 700 clamp(12px,3.2vw,24px) 'Times New Roman',Times,serif;color:#14196b;white-space:nowrap;pointer-events:none}
.sp-val{font:clamp(9px,1.8vw,13px) var(--sans,system-ui);color:#282022;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-x{color:#14196b;font-weight:800;font-size:clamp(10px,2vw,16px);pointer-events:none}
.sp-final{max-width:620px;margin:26px auto 0;background:#fff;border:1px solid var(--line,#e2d6cb);border-radius:16px;padding:20px}
.sp-final .consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}.sp-final .consent input{margin-top:3px;width:18px;height:18px}
.sp-finish{width:100%;margin-top:14px;min-height:50px;font-size:16px}
.sp-small{font-size:12.5px;margin:10px 0 0;text-align:center}
.sp-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fffdfbf2;border-top:1px solid var(--line,#e2d6cb);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(8px)}
.sp-bar #spProg{font-size:13px;color:#554946}.sp-bar .btn{min-height:46px;padding:0 24px;font-size:15px}
.sp-done{text-align:center;max-width:520px;margin:60px auto;padding:0 16px}
.sp-done .dl{display:inline-block;margin-top:14px;background:var(--wine,#612f42);color:#fff;border-radius:99px;padding:13px 26px;text-decoration:none;font-weight:600}
@media(max-width:860px){.dp-layout{grid-template-columns:1fr}.dp-side{position:static;order:-1}.dp-view{padding:14px 10px 60px}}
@media(max-width:520px){.sp-head h1{font-size:23px}.sp-main{padding:14px 4px 150px}.sp-bar #spProg{font-size:12px}}

/* vendor "Fill in yours" mode */
.dp-mode{flex:none}.dp-mode button:disabled{opacity:.45;cursor:not-allowed}
.dp-stage.fillmode .dp-f.p-client{opacity:.45;pointer-events:none}
.dp-stage.fillmode .dp-f.p-vendor{cursor:pointer}
.dp-f.todo{border-color:#d9a441;background:#fff3cf9e;cursor:pointer}
@keyframes dpTodo{0%,100%{box-shadow:0 0 0 0 #d9a44100}50%{box-shadow:0 0 0 6px #d9a44155}}
.dp-f.filled{border-color:#3d765f;background:#3d765f12}
.dp-f.filled img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.dp-f .sp-sig{font:italic 700 clamp(11px,2.2vw,22px) 'Times New Roman',Times,serif;color:#14196b;white-space:nowrap;pointer-events:none}
.dp-f .sp-val{font:clamp(9px,1.5vw,12px) var(--sans,system-ui);color:#282022;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.dp-f .sp-x{color:#14196b;font-weight:800;pointer-events:none}
.dp-f.pulse{animation:spPulse .8s ease 3}
.dp-ownnote{font-size:13px;margin:14px 0 0}

.dp-tb .dp-sign{background:#2f8f5b;color:#fff}.dp-tb .dp-sign:hover{background:#26774c}
.dp-f.todo{cursor:move}

/* party colours: the same blue / orange as the boxes on the PDF */
#dpParty{background:transparent;padding:0;gap:8px}
#dpParty button{border:1.5px solid;border-radius:10px;padding:10px;box-shadow:none;transition:background .15s,box-shadow .15s}
#dpParty button[data-p=client]{border-color:#2f6fa8;background:#2f6fa81c;color:#1d4f7c}
#dpParty button[data-p=vendor]{border-color:#b0762f;background:#b0762f1d;color:#7a4c14}
#dpParty button[data-p=client]:hover{background:#2f6fa82e}#dpParty button[data-p=vendor]:hover{background:#b0762f30}
#dpParty button[data-p=client].on{background:#2f6fa8;color:#fff;box-shadow:0 0 0 3px #2f6fa833}
#dpParty button[data-p=vendor].on{background:#b0762f;color:#fff;box-shadow:0 0 0 3px #b0762f33}
#dpPal .pal i{width:9px;height:9px;box-sizing:border-box;border-radius:50%;background:transparent;border:1.5px solid #2f6fa8;opacity:.55}#dpPal.pv .pal i{border-color:#b0762f}
#dpPal .pal.armed i{opacity:.9;background:#2f6fa833}#dpPal.pv .pal.armed i{background:#b0762f33}
#dpPal .pal{border-color:#2f6fa855;background:#2f6fa810}#dpPal.pv .pal{border-color:#b0762f55;background:#b0762f12}
#dpPal .pal.armed{border-color:#2f6fa8;background:#2f6fa82a;box-shadow:0 0 0 3px #2f6fa826}
#dpPal.pv .pal.armed{border-color:#b0762f;background:#b0762f2e;box-shadow:0 0 0 3px #b0762f26}

/* dialogs must be above the opened folder (1500), the move menu (1800) and the drag ghost (2000) */
.dp-modal{z-index:2200}