/* NotesNepal PDF tools: homepage section (.nnpdf) and tool UI (.nnp). Loaded only on the homepage and PDF tool pages. */

/* ---------- Homepage section ---------- */
.nnpdf { padding: 32px 0 8px; }
.nnpdf [hidden] { display: none !important; }
.nnpdf__head { text-align: center; max-width: 720px; margin: 0 auto 18px; }
.nnpdf__title { margin: 0 0 6px; font-family: var(--font-head, inherit); font-size: clamp(1.5rem, 3vw, 2rem); }
.nnpdf__np { font-size: .7em; color: var(--muted, #5f6b7a); font-weight: 600; }
.nnpdf__lead { margin: 0; color: var(--muted, #5f6b7a); }
.nnpdf__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; }
.nnpdf__tab { min-height: 36px; padding: 4px 14px; border: 1px solid var(--line, #e0e5ec); border-radius: 999px; background: var(--bg, #fff); color: var(--ink, #1c2430); font: 600 .88rem var(--font-head, inherit); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nnpdf__tab:hover { border-color: var(--blue, #1f63b0); color: var(--blue, #1f63b0); }
.nnpdf__tab.is-on { background: var(--blue, #1f63b0); border-color: var(--blue, #1f63b0); color: #fff; }
.nnpdf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.nnpdf__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 14px 6px 12px; border-radius: 14px; text-align: center; text-decoration: none; color: var(--ink, #1c2430); transition: background .2s; }
a.nnpdf__link:hover, a.nnpdf__link:focus-visible { background: var(--soft, #f4f6f9); color: var(--ink, #1c2430); }
.nnpdf__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--nnpdf-a), var(--nnpdf-b)); box-shadow: 0 6px 16px -8px var(--nnpdf-b); transition: transform .25s cubic-bezier(.3,1.5,.6,1), box-shadow .25s; }
a.nnpdf__link:hover .nnpdf__icon, a.nnpdf__link:focus-visible .nnpdf__icon { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 22px -10px var(--nnpdf-b); }
.nnpdf__name { font: 600 .88rem/1.25 var(--font-head, inherit); }
.nnpdf__item.is-soon .nnpdf__link { cursor: default; }
.nnpdf__item.is-soon .nnpdf__icon { filter: grayscale(.85); opacity: .55; box-shadow: none; }
.nnpdf__item.is-soon .nnpdf__name { color: var(--muted, #5f6b7a); }
.nnpdf__soon { position: absolute; top: 8px; right: 50%; transform: translateX(46px); padding: 1px 7px; border-radius: 999px; background: var(--soft, #f4f6f9); border: 1px solid var(--line, #e0e5ec); color: var(--muted, #5f6b7a); font-size: .68rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .nnpdf__icon, .nnpdf__link { transition: none; } }
@media (max-width: 600px) {
	.nnpdf { padding-top: 22px; }
	.nnpdf__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.nnpdf__tab { flex: none; }
	.nnpdf__grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
	.nnpdf__icon { width: 56px; height: 56px; }
	.nnpdf__icon svg { width: 26px; height: 26px; }
	.nnpdf__name { font-size: .8rem; }
	.nnpdf__soon { transform: translateX(38px); }
}
@media (max-width: 340px) { .nnpdf__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tool UI ---------- */
.nnp { display: flex; flex-direction: column; gap: 14px; }
.nnp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 2px dashed var(--nn-line, #dde2ea); border-radius: 14px; background: var(--nn-soft, #f4f6f9); text-align: center; transition: border-color .15s, background .15s; }
.nnp-drop.is-over { border-color: var(--nn-primary, #1f63b0); background: color-mix(in srgb, var(--nn-primary, #1f63b0) 8%, transparent); }
.nnp-drop.has-files { padding: 16px; }
.nnp-drop.has-files .nnp-drop__ic, .nnp-drop.has-files .nnp-drop__note { display: none; }
.nnp-drop__ic { color: var(--nn-accent, #c62f3a); }
.nnp-drop__or, .nnp-drop__note { margin: 0; }
.nnp-drop__note { font-size: .85rem; max-width: 460px; }
.nnp-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .7rem 1.6rem; border-radius: 999px; font-size: 1.05rem; background: var(--nn-accent, #c62f3a); border-color: var(--nn-accent, #c62f3a); }
.nnp-pick:hover { background: color-mix(in srgb, var(--nn-accent, #c62f3a) 85%, #000); border-color: transparent; }
.nnp-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.nnp-pick:focus-within { outline: 3px solid color-mix(in srgb, var(--nn-primary, #1f63b0) 45%, transparent); outline-offset: 2px; }
.nnp-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nnp-files:empty { display: none; }
.nnp-files li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nn-line, #dde2ea); border-radius: 10px; background: var(--nn-bg, #fff); }
.nnp-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nnp-fsize { color: var(--nn-muted, #5b6676); font-size: .85rem; white-space: nowrap; }
.nnp-mini { min-width: 34px; min-height: 34px; padding: 2px 8px; border: 1px solid var(--nn-line, #dde2ea); border-radius: 8px; background: var(--nn-bg, #fff); color: var(--nn-text, #1b2330); font: inherit; cursor: pointer; }
.nnp-mini:hover { border-color: var(--nn-primary, #1f63b0); color: var(--nn-primary, #1f63b0); }
.nnp-mini:disabled { opacity: .4; cursor: default; }
.nnp-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.nnp-optgroup { display: contents; }
.nnp-optgroup[hidden] { display: none !important; }
.nnp-opt { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1 1 160px; font-size: .9rem; font-weight: 600; }
.nnp-opt--wide { flex-basis: 260px; }
.nnp-opt--full { flex-basis: 100%; }
.nnp-opt--color { flex: 0 0 auto; min-width: 0; }
.nnp-opt--color input { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--nn-line, #dde2ea); border-radius: 8px; background: var(--nn-bg, #fff); }
.nnp .nn-input { font: inherit; font-weight: 400; font-size: 1rem; width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--nn-line, #dde2ea); border-radius: 8px; background: var(--nn-bg, #fff); color: var(--nn-text, #1b2330); }
.nnp input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--nn-primary, #1f63b0); }
.nnp-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .95rem; cursor: pointer; }
.nnp-check input { width: 20px; height: 20px; accent-color: var(--nn-primary, #1f63b0); }
.nnp-run { align-self: center; min-width: 220px; min-height: 52px; border-radius: 999px; font-size: 1.1rem; }
.nnp-run:disabled { opacity: .45; cursor: not-allowed; }
.nnp-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nnp-progress progress { width: 100%; max-width: 420px; height: 10px; accent-color: var(--nn-primary, #1f63b0); }
.nnp-progress span { color: var(--nn-muted, #5b6676); font-size: .9rem; }
.nnp-result { padding: 16px; border-radius: 12px; background: color-mix(in srgb, #2bb673 10%, var(--nn-bg, #fff)); border: 1px solid color-mix(in srgb, #2bb673 40%, transparent); text-align: center; }
.nnp-done { margin: 0 0 8px; font-weight: 700; color: #138a54; }
.nnp-outs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nnp-outs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.nnp-outs .nn-btn { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; }

/* Organize thumbnails */
.nnp-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.nnp-thumbs:empty { display: none; }
.nnp-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--nn-line, #dde2ea); border-radius: 10px; background: var(--nn-bg, #fff); }
.nnp-thumb img { max-width: 100%; max-height: 150px; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .2s; }
.nnp-thumb > span { font-size: .8rem; color: var(--nn-muted, #5b6676); }
.nnp-thumb__bar { display: flex; gap: 2px; }
.nnp-thumb__bar button { width: 28px; height: 28px; border: 1px solid var(--nn-line, #dde2ea); border-radius: 6px; background: var(--nn-bg, #fff); color: var(--nn-text, #1b2330); cursor: pointer; }
.nnp-thumb__bar button:hover { border-color: var(--nn-primary, #1f63b0); color: var(--nn-primary, #1f63b0); }

/* Crop preview */
.nnp-preview { position: relative; align-self: center; max-width: 100%; }
.nnp-preview:empty { display: none; }
.nnp-pv { display: block; max-width: 100%; height: auto; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.nnp-crop { position: absolute; border: 2px solid var(--nn-primary, #1f63b0); background: color-mix(in srgb, var(--nn-primary, #1f63b0) 10%, transparent); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.nnp-preview { overflow: hidden; }

/* Page stage (edit, sign, redact) */
.nnp-stage:empty { display: none; }
.nnp-stage__nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.nnp-stage__label { font-weight: 600; min-width: 100px; text-align: center; }
.nnp-stage__wrap { position: relative; max-width: 760px; margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.nnp-stage__canvas { display: block; width: 100%; height: auto; }
.nnp-stage__layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.nnp-stage__hint { text-align: center; margin: 8px 0 0; font-size: .88rem; }
.nnp-item { position: absolute; box-sizing: border-box; cursor: move; outline: 1px dashed color-mix(in srgb, var(--nn-primary, #1f63b0) 80%, transparent); }
.nnp-item img { display: block; width: 100%; height: 100%; pointer-events: none; }
.nnp-item--box { outline: 1px dashed #888; }
.nnp-item--drag { background: rgba(31,99,176,.18); outline: 2px dashed var(--nn-primary, #1f63b0); pointer-events: none; }
.nnp-item__x { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--nn-accent, #c62f3a); color: #fff; font-size: 12px; line-height: 24px; cursor: pointer; }
.nnp-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nnp-find .nn-muted { flex-basis: 100%; margin: 0; }

/* Sign pad */
.nnp-pad { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nnp-pad[hidden] { display: none !important; }
.nnp-pad canvas { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; border: 2px dashed var(--nn-line, #dde2ea); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }

/* Forms */
.nnp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nnp-fields:empty { display: none; }
.nnp-field { display: flex; flex-direction: column; }
.nnp-field input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--nn-primary, #1f63b0); }
.nnp-field .nn-input { font: inherit; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--nn-line, #dde2ea); border-radius: 8px; background: var(--nn-bg, #fff); color: var(--nn-text, #1b2330); }

/* Compare */
.nnp-diffbox { max-height: 520px; overflow: auto; border: 1px solid var(--nn-line, #dde2ea); border-radius: 10px; padding: 10px; background: var(--nn-bg, #fff); }
.nnp-diff__sum { margin: 0 0 8px; font-weight: 700; }
.nnp-diff { list-style: none; margin: 0; padding: 0; font: .92rem/1.5 "Noto Sans Devanagari", system-ui, sans-serif; }
.nnp-diff li { padding: 2px 8px; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; }
.nnp-diff .is-add { background: rgba(43,182,115,.16); }
.nnp-diff .is-del { background: rgba(198,47,58,.14); text-decoration: line-through; }
.nnp-diff .is-gap { color: var(--nn-muted, #5b6676); font-style: italic; }
.nnp-summary .nn-area { white-space: pre-wrap; }
.nnp-trlinks { display: flex; flex-wrap: wrap; gap: 8px; } .nnp-trlinks .nn-btn { text-decoration: none; display: inline-flex; align-items: center; }