/* Openbaar "Klaar voor Nusuk" (hajj-nusuk.blade.php). Bouwt voort op guide.css (kleuren, .card, .btn). */
.nt-back{display:table;margin:0 0 14px;font-weight:700;color:var(--gold);text-decoration:none}
.nt-back:hover{text-decoration:underline}
.nt-privacy{max-width:62ch;margin:14px 0 0;background:var(--green-bg);border-radius:12px;padding:12px 14px;font-size:15.5px;color:#245c2c}
.nt-privacy b{color:#1d4d24}
.nt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:22px;padding-bottom:10px;align-items:start}
.nt h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:22px;color:var(--brown)}
.nt-num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--gold);font-size:16px;font-weight:800}
.nt-tip{margin:0 0 10px;color:#5d4b38;font-size:16px}
.nt-example{margin:0 0 16px;font-size:15px}
.nt-example summary{cursor:pointer;color:var(--gold);font-weight:600}
.nt-example img{display:block;width:100%;max-height:240px;object-fit:contain;margin-top:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px}
.nt-pick{width:100%;cursor:pointer;font-size:17px;padding:16px 22px}
.nt.working .nt-pick{opacity:.55;pointer-events:none}
.nt-spec{margin:8px 0 0;font-size:14px;color:var(--muted)}
.nt-busy{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--brown);font-weight:600}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:nt-spin .8s linear infinite}
@keyframes nt-spin{to{transform:rotate(360deg)}}
.nt-error{margin:14px 0 0;background:#fdecec;border:1px solid #f3c4c4;border-radius:12px;padding:12px 14px;color:#8a1f1f;font-size:15.5px}
.nt-result{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:16px;border:1.5px solid var(--line);border-radius:12px;padding:14px}
/* grijze rand: anders zie je op wit niet waar de witte achtergrond ophoudt */
.nt-result img{width:110px;height:110px;object-fit:contain;background:#fff;border:1px solid #cdbfae;border-radius:8px}
.nt[data-kind=passport] .nt-result img{height:160px}
.nt-meta{margin:0 0 10px;font-weight:700;color:var(--green)}
.nt-warnings{grid-column:1/-1;margin:0;padding:0;list-style:none;display:grid;gap:8px}
.nt-warnings li{background:var(--amber-bg);border-radius:10px;padding:10px 12px;color:#6d4a0a;font-size:15px}
.nt-warnings:empty{display:none}
.nt-foot{padding-top:10px;padding-bottom:50px;color:#5d4b38}
.nt-foot p{max-width:70ch;margin:8px 0}
/* Pasfoto bijstellen. De gouden lijnen liggen alleen over het beeld; ze komen niet in het bestand. */
.nt-editor{grid-column:1/-1;display:grid;gap:10px}
.nt-editor-hint{margin:0;font-size:15px;color:#5d4b38}
.nt-stage{position:relative;width:min(100%,320px);margin:0 auto;border:1px solid #cdbfae;border-radius:10px;overflow:hidden;background:#fff}
.nt-stage canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;touch-action:none;cursor:grab}
.nt-stage canvas:active{cursor:grabbing}
.nt-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nt-dim{fill:rgba(40,28,14,.5);stroke:none}
.nt-oval{fill:none;stroke:#e0b45a;stroke-width:2.5;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.nt-edge{stroke:#e0b45a;stroke-width:2;vector-effect:non-scaling-stroke}
.nt-mid{stroke:rgba(255,255,255,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.nt-g{position:absolute;right:6px;padding:2px 8px;border-radius:999px;background:rgba(40,28,14,.78);font-size:11px;font-weight:800;letter-spacing:.02em;color:#f3d28a;pointer-events:none}
.nt-g-top{top:calc(7% + 4px)}.nt-g-chin{top:calc(77% + 4px)}
.nt-editor label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--brown)}
.nt-editor input[type=range]{width:100%;accent-color:var(--gold)}
.nt-reset,.nt-bg{justify-self:start}
.nt-bg:disabled{opacity:.55;cursor:wait}
.nt[data-kind=photo] .nt-editor{order:1}
.nt[data-kind=photo] .nt-result>div:first-child{order:2;grid-column:1/-1}
.nt[data-kind=photo] .nt-warnings{order:3}
/* Paspoort met camera: kader = opengeslagen paspoort rechtop (2 pagina's van 125 × 88 mm). */
.nt-cam-open{width:100%;margin-top:10px;font-size:17px;padding:14px 22px}
.nt-cam{margin-top:12px;display:grid;gap:10px}
.nt-cam-view{position:relative;width:100%;aspect-ratio:3/4;max-height:70vh;overflow:hidden;border-radius:12px;background:#000}
.nt-cam-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nt-cam-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:86%;aspect-ratio:125/176;max-width:88%;border:3px solid #fff;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none}
.nt-cam-frame:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(255,255,255,.7)}
.nt-cam-frame span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:700}
.nt-cam-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nt.working .nt-cam-open{opacity:.55;pointer-events:none}
/* In het uitschuifpaneel: minder rand, want de hostpagina heeft al een kader. */
body.embed .hero{padding-top:14px}
body.embed .nt-foot{padding-bottom:18px}
@media (max-width:760px){
  body.embed .wrap{padding-left:10px;padding-right:10px}
  body.embed .nt.card{padding:16px}
  .nt-grid{grid-template-columns:1fr}
  .nt-result{grid-template-columns:1fr;justify-items:start}
  .nt-save{width:100%}
}