/* KERTANEXA_V15_27_2_MULTIPAGE_SIGNATURE_PLACEMENT */
.pdf-signature-container { max-width: 1040px; }
.pdf-signature-workspace { display: grid; gap: 18px; }
.signature-editor,
.signature-placement {
    border: 1px solid #dbe3f0;
    border-radius: 18px;
    background: #fbfdff;
    padding: 20px;
    display: grid;
    gap: 18px;
}
.signature-section-heading h2 { margin: 5px 0 0; color: #263a60; font-size: clamp(1.08rem, 3vw, 1.35rem); }
.signature-section-heading p { margin: 7px 0 0; color: #667995; line-height: 1.55; }
.signature-source-tabs { display: inline-flex; width: fit-content; border: 1px solid #cbd6e6; border-radius: 12px; background: #fff; padding: 4px; gap: 4px; }
.signature-source-tab { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: #53647f; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.signature-source-tab.is-active { background: #173b8f; color: #fff; box-shadow: 0 4px 12px rgba(23, 59, 143, .2); }
.signature-source-tab:focus-visible,
.signature-clear-button:focus-visible,
.signature-ink:focus-visible,
.signature-overlay:focus-visible { outline: 3px solid rgba(35, 92, 181, .25); outline-offset: 2px; }
.signature-source-panel { display: grid; gap: 14px; }
.signature-source-panel[hidden],
.signature-upload-preview[hidden],
.signature-stamp-preview[hidden],
.signature-preview-stage[hidden],
.signature-overlay[hidden] { display: none !important; }
.signature-draw-toolbar { display: grid; grid-template-columns: minmax(220px, auto) minmax(180px, 1fr) auto; align-items: start; gap: 14px; }
.signature-color-control { display: grid; gap: 9px; }
.signature-control-label { color: #40516c; font-size: .84rem; font-weight: 700; }
.signature-ink-options { display: flex; gap: 9px; align-items: center; }
.signature-ink { --ink-color: #111827; width: 36px; height: 36px; border: 3px solid #fff; border-radius: 50%; background: var(--ink-color); box-shadow: 0 0 0 1px #b9c6d8; padding: 0; cursor: pointer; }
.signature-ink[data-ink-color="#111827"] { --ink-color: #111827; }
.signature-ink[data-ink-color="#173B8F"] { --ink-color: #173b8f; }
.signature-ink.is-selected { box-shadow: 0 0 0 3px #dce9ff, 0 0 0 5px #235cb5; }
.signature-custom-color { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(130px, 1fr); gap: 9px; }
.signature-custom-color label { display: grid; gap: 5px; color: #53647f; font-size: .76rem; font-weight: 700; }
.signature-custom-color input[type="color"] { width: 100%; min-height: 42px; border: 1px solid #cbd6e6; border-radius: 10px; background: #fff; padding: 4px; cursor: pointer; }
.signature-custom-color input[type="text"] { width: 100%; min-height: 42px; border: 1px solid #cbd6e6; border-radius: 10px; background: #fff; color: #243551; padding: 8px 10px; text-transform: uppercase; }
.signature-custom-color input:focus-visible { outline: 3px solid rgba(35, 92, 181, .2); border-color: #235cb5; }
.signature-premium-color-note { margin: 0; display: flex; gap: 7px; align-items: flex-start; max-width: 290px; color: #667995; font-size: .77rem; line-height: 1.45; }
.signature-premium-color-note svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signature-stroke-control { display: grid; gap: 6px; color: #40516c; font-size: .84rem; font-weight: 700; }
.signature-stroke-control small, .signature-size-control small { color: #72819a; font-size: .76rem; font-weight: 500; line-height: 1.45; }
.signature-stroke-control input,
.signature-size-control input { width: 100%; accent-color: #235cb5; }
.signature-clear-button { display: inline-flex; gap: 7px; align-items: center; justify-content: center; white-space: nowrap; }
.signature-clear-button svg,
.signature-page-controls button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signature-draw-surface { position: relative; border: 1px dashed #9eb0c8; border-radius: 14px; background: #fff; overflow: hidden; touch-action: none; }
.signature-draw-surface canvas { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 340; cursor: crosshair; touch-action: none; }
.signature-draw-surface p { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8794a8; pointer-events: none; }
.signature-image-drop { min-height: 150px; border: 1px dashed #9eb0c8; border-radius: 14px; background: #fff; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; padding: 22px; cursor: pointer; }
.signature-image-drop input { position: absolute; opacity: 0; pointer-events: none; }
.signature-image-drop:hover { border-color: #235cb5; background: #f7faff; }
.signature-upload-icon { width: 42px; height: 42px; border-radius: 12px; background: #edf4ff; color: #235cb5; display: grid; place-items: center; }
.signature-upload-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signature-image-drop > span:last-child { color: #72819a; font-size: .84rem; }
.signature-upload-preview { border: 1px solid #dbe3f0; border-radius: 12px; background: #fff; padding: 12px; display: flex; align-items: center; gap: 14px; }
.signature-upload-preview img { width: 130px; max-height: 72px; object-fit: contain; background: repeating-conic-gradient(#f2f4f8 0 25%, #fff 0 50%) 50% / 16px 16px; border: 1px solid #e2e7ef; border-radius: 8px; }
.signature-upload-preview div { min-width: 0; display: grid; gap: 4px; }
.signature-upload-preview strong { overflow-wrap: anywhere; color: #263a60; }
.signature-upload-preview span { color: #71809a; font-size: .82rem; }
.signature-checkbox-row { display: inline-flex; align-items: center; gap: 9px; color: #40516c; font-size: .88rem; }
.signature-checkbox-row input,
.signature-checkbox-card input[type="checkbox"] { accent-color: #235cb5; }
.signature-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.signature-checkbox-card { border: 1px solid #dbe3f0; border-radius: 13px; background: #fff; padding: 13px; display: grid; gap: 10px; }
.signature-checkbox-heading { display: inline-flex; align-items: center; gap: 8px; color: #354867; font-size: .86rem; font-weight: 700; }
.signature-checkbox-card input[type="text"],
.signature-checkbox-card input[type="date"],
.signature-page-controls input {
    width: 100%; min-height: 43px; border: 1px solid #cbd6e6; border-radius: 10px; background: #fff; color: #243551; padding: 9px 11px;
}
.signature-checkbox-card input:disabled { background: #f3f5f8; color: #8995a7; }
.signature-checkbox-card input:focus-visible,
.signature-page-controls input:focus-visible { outline: 3px solid rgba(35, 92, 181, .2); border-color: #235cb5; }
.signature-stamp-preview { border: 1px solid #dbe3f0; border-radius: 14px; background: repeating-conic-gradient(#f2f4f8 0 25%, #fff 0 50%) 50% / 18px 18px; padding: 14px; display: grid; gap: 10px; justify-items: center; }
.signature-stamp-preview > span { justify-self: start; color: #667995; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.signature-stamp-preview img { max-width: min(100%, 560px); max-height: 150px; object-fit: contain; }
.signature-page-controls { display: grid; grid-template-columns: auto minmax(230px, 1fr) auto; align-items: center; gap: 12px; }
.signature-page-controls label { display: flex; align-items: center; justify-content: center; gap: 9px; color: #40516c; font-size: .88rem; }
.signature-page-controls input { max-width: 90px; text-align: center; }
.signature-page-controls .button { min-height: 42px; padding-inline: 13px; }
.signature-preview-shell { min-height: 320px; border: 1px solid #dbe3f0; border-radius: 15px; background: #edf2f9; padding: 14px; display: grid; place-items: center; overflow: auto; }
.signature-preview-loading { color: #65758f; text-align: center; }
.signature-preview-stage { position: relative; width: fit-content; max-width: 100%; box-shadow: 0 12px 30px rgba(35, 64, 111, .16); line-height: 0; }
.signature-preview-stage > canvas { display: block; max-width: 100%; height: auto; background: #fff; }
.signature-overlay { position: absolute; left: 0; top: 0; border: 1px dashed #235cb5; border-radius: 5px; background: rgba(255,255,255,.05); padding: 0; cursor: grab; touch-action: none; line-height: 0; box-shadow: 0 0 0 2px rgba(35,92,181,.12); }
.signature-overlay:active { cursor: grabbing; }
.signature-overlay img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.signature-drag-handle { position: absolute; right: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #173b8f; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(23,59,143,.3); pointer-events: none; }
.signature-drag-handle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signature-size-control { display: grid; gap: 8px; color: #354867; font-size: .86rem; font-weight: 700; }
.signature-size-control output { float: right; color: #235cb5; }
.signature-placement-summary { border-radius: 12px; background: #edf4ff; color: #2d4c78; padding: 12px 14px; font-size: .88rem; line-height: 1.55; }
.signature-submit { justify-self: start; min-width: 230px; }
.signature-submit.is-loading { cursor: wait; opacity: .82; }
.signature-submit.is-loading::after { content: ""; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: kx-sign-spin .75s linear infinite; }
@keyframes kx-sign-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .signature-editor, .signature-placement { padding: 16px; border-radius: 15px; }
    .signature-draw-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .signature-ink-options { justify-content: flex-start; }
    .signature-custom-color { grid-template-columns: 1fr; }
    .signature-clear-button { width: 100%; }
    .signature-details-grid { grid-template-columns: 1fr; }
    .signature-mode-grid { grid-template-columns: 1fr; }
    .signature-selection-range > div { grid-template-columns: 1fr; }
    .signature-placement-actions { display: grid; grid-template-columns: 1fr; }
    .signature-placement-actions .button { width: 100%; }
    .signature-page-controls { grid-template-columns: 1fr 1fr; }
    .signature-page-controls label { grid-column: 1 / -1; grid-row: 1; }
    .signature-page-controls button { width: 100%; }
    .signature-preview-shell { min-height: 280px; padding: 9px; }
    .signature-submit { width: 100%; min-width: 0; }
}


.signature-mode-fieldset { margin: 0; border: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.signature-mode-fieldset legend { color: #40516c; font-size: .86rem; font-weight: 800; margin-bottom: 8px; }
.signature-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.signature-mode-card { position: relative; min-height: 92px; border: 1px solid #cbd6e6; border-radius: 13px; background: #fff; padding: 13px; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.signature-mode-card input { margin-top: 3px; accent-color: #235cb5; }
.signature-mode-card span { display: grid; gap: 5px; min-width: 0; }
.signature-mode-card strong { color: #293d60; font-size: .88rem; }
.signature-mode-card small { color: #72819a; line-height: 1.45; }
.signature-mode-card.is-selected { border-color: #235cb5; background: #f2f7ff; box-shadow: 0 0 0 2px rgba(35,92,181,.1); }
.signature-mode-card.is-locked { cursor: not-allowed; background: #f6f8fb; opacity: .78; }
.signature-mode-card > svg { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: #71809a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signature-premium-mode-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: #667995; font-size: .8rem; line-height: 1.5; }
.signature-premium-mode-note svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signature-multipage-tools { border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; padding: 14px; display: grid; gap: 13px; }
.signature-multipage-tools[hidden], .signature-selection-range[hidden] { display: none !important; }
.signature-selection-range { display: grid; gap: 7px; }
.signature-selection-range > label { color: #40516c; font-size: .84rem; font-weight: 800; }
.signature-selection-range > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.signature-selection-range input { width: 100%; min-height: 43px; border: 1px solid #cbd6e6; border-radius: 10px; background: #fff; color: #243551; padding: 9px 11px; }
.signature-selection-range input:focus-visible { outline: 3px solid rgba(35,92,181,.2); border-color: #235cb5; }
.signature-selection-range small { color: #72819a; font-size: .76rem; line-height: 1.45; }
.signature-page-enabled-row { display: flex; align-items: center; gap: 9px; color: #354867; font-size: .86rem; font-weight: 700; }
.signature-page-enabled-row input { accent-color: #235cb5; }
.signature-placement-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.signature-placement-actions .button { min-height: 39px; padding: 8px 11px; font-size: .8rem; }
.signature-remove-page { color: #a22b2b; border-color: #e2bcbc; }
.signature-page-state { color: #667995; font-size: .8rem; line-height: 1.5; }