/* Scoped payment add-on for the existing NORDLINE shared-order page. */
#nlsyp-page { --nlop-red:#d32626; --nlop-ink:#191919; --nlop-muted:#686868; --nlop-line:#e1e1e1; --nlop-green:#187a45; --nlop-amber:#976617; }
#nlsyp-page .nlop-card *, #nlsyp-page .nlop-progress *, #nlsyp-page .nlop-admin * { box-sizing:border-box; }
#nlsyp-page [class*="nlop-"][hidden] { display:none!important; }
#nlsyp-page.nlop-mounted [data-nlsyp-delivery-estimate] { display:none!important; }
#nlsyp-page.nlop-mounted .nlsyp-page-top > div:first-child { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
#nlsyp-page.nlop-mounted [data-nlsyp-order-reference] { box-sizing:border-box; display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; min-width:0; margin:9px 0 0; padding:7px 10px; border:1px solid var(--nlop-line); border-left:1px solid var(--nlop-line); border-radius:4px; background:#f7f7f7; box-shadow:none; color:var(--nlop-ink); font-size:13px; line-height:1.5; letter-spacing:normal; }
#nlsyp-page.nlop-mounted [data-nlsyp-order-reference] > svg { width:16px; height:16px; flex:0 0 16px; color:var(--nlop-muted); }
#nlsyp-page.nlop-mounted [data-nlsyp-order-reference] > span { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; min-width:0; }
#nlsyp-page.nlop-mounted [data-nlsyp-order-reference] strong { color:var(--nlop-ink); font-size:14px; line-height:1.4; font-weight:650; letter-spacing:normal; }
#nlsyp-page.nlop-mounted [data-nlsyp-page-intro] { margin-top:12px; }
#nlsyp-page .nlop-badge { display:flex; align-items:center; width:max-content; max-width:100%; padding:7px 10px; margin:8px 0 0; border-radius:4px; background:#fff0f0; color:var(--nlop-red); font-size:11px; line-height:1.35; letter-spacing:.06em; font-weight:700; }
#nlsyp-page .nlop-badge::before { content:""; width:6px; height:6px; margin-right:9px; flex-shrink:0; border-radius:50%; background:var(--nlop-red); animation:nlop-pulse 2.4s ease-in-out infinite; }
#nlsyp-page .nlop-badge.is-paid { background:#edf8f0; color:var(--nlop-green); }
#nlsyp-page .nlop-badge.is-paid::before { background:var(--nlop-green); animation:none; }
#nlsyp-page .nlop-heading-delivery { width:100%; max-width:380px; margin:13px 0 0; padding:15px 17px; border-left:3px solid var(--nlop-red); border-radius:4px; background:#fff7f7; color:var(--nlop-ink); }
#nlsyp-page .nlop-heading-delivery strong { display:block; margin:0; color:var(--nlop-red); font-size:12px; line-height:1.5; letter-spacing:.07em; font-weight:650; }
#nlsyp-page .nlop-heading-delivery b { display:block; margin-top:5px; font-size:27px; line-height:1.3; letter-spacing:-.02em; font-weight:650; }
#nlsyp-page .nlop-heading-delivery p { margin:5px 0 0; color:var(--nlop-ink); font-size:12px; line-height:1.6; }
#nlsyp-page .nlsyp-page-top.nlop-has-payment { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px 26px; align-items:center; margin-bottom:22px; }
#nlsyp-page .nlsyp-page-top.nlop-has-payment > div:first-child { grid-column:1; grid-row:1; min-width:0; }
#nlsyp-page .nlsyp-page-top.nlop-has-payment > .nlsyp-back { grid-column:1; grid-row:2; justify-self:start; }
#nlsyp-page .nlsyp-page-top.nlop-has-payment > .nlop-card { grid-column:2; grid-row:1 / span 2; }
#nlsyp-page .nlop-card { min-width:0; margin:0; padding:19px 20px; border:1px solid #efcece; border-left:3px solid var(--nlop-red); border-radius:5px; background:#fff7f7; color:var(--nlop-ink); }
#nlsyp-page .nlop-card.is-review { background:#fff9ed; border-color:#eadab6; border-left-color:var(--nlop-amber); }
#nlsyp-page .nlop-card.is-paid { background:#f0f9f2; border-color:#c8e1d0; border-left-color:var(--nlop-green); }
#nlsyp-page .nlop-card-heading { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:9px; }
#nlsyp-page .nlop-card h2, #nlsyp-page .nlop-admin h2 { padding:0; margin:0; color:var(--nlop-ink); font-size:16px; line-height:1.45; letter-spacing:-.015em; font-weight:650; }
#nlsyp-page .nlop-card #nlop-payment-title { display:flex; align-items:center; gap:8px; }
#nlsyp-page .nlop-card-icon { display:grid; place-items:center; width:21px; height:21px; flex-shrink:0; color:var(--nlop-amber); }
#nlsyp-page .nlop-card-icon svg { width:21px; height:21px; }
#nlsyp-page .nlop-card-icon .nlop-mark-check { display:none; }
#nlsyp-page .nlop-card.is-paid .nlop-card-icon { color:var(--nlop-green); }
#nlsyp-page .nlop-card.is-paid .nlop-card-icon .nlop-mark-clock { display:none; }
#nlsyp-page .nlop-card.is-paid .nlop-card-icon .nlop-mark-check { display:block; }
#nlsyp-page .nlop-proof-label { max-width:135px; flex-shrink:0; text-align:right; color:var(--nlop-muted); font-size:11px; line-height:1.5; }
#nlsyp-page .is-review .nlop-proof-label { color:var(--nlop-amber); }
#nlsyp-page .is-paid .nlop-proof-label { color:var(--nlop-green); }
#nlsyp-page .nlop-intro { margin:0 0 13px; color:var(--nlop-muted); font-size:12px; line-height:1.65; }
#nlsyp-page .nlop-upload-row { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
#nlsyp-page .nlop-file-picker { display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:42px; padding:10px 13px; border:1px solid var(--nlop-line); border-radius:4px; background:#fff; color:var(--nlop-ink); font-size:12px; line-height:1.4; font-weight:600; cursor:pointer; }
#nlsyp-page .nlop-file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
#nlsyp-page .nlop-file-picker:focus-within { outline:2px solid var(--nlop-ink); outline-offset:3px; }
#nlsyp-page .nlop-file-picker.is-disabled { opacity:.5; cursor:default; }
#nlsyp-page .nlop-file-picker.is-disabled input { cursor:default; }
#nlsyp-page .nlop-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; max-width:100%; padding:10px 14px; margin:0; border:1px solid var(--nlop-ink); border-radius:4px; background:var(--nlop-ink); color:#fff; font-family:inherit; font-size:12px; line-height:1.45; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
#nlsyp-page .nlop-button:hover:not(:disabled) { background:var(--nlop-red); border-color:var(--nlop-red); }
#nlsyp-page .nlop-button:disabled { opacity:.45; cursor:default; }
#nlsyp-page .nlop-button:focus-visible, #nlsyp-page .nlop-download:focus-visible, #nlsyp-page .nlop-retry:focus-visible, #nlsyp-page .nlop-remove:focus-visible { outline:2px solid var(--nlop-ink); outline-offset:3px; }
#nlsyp-page .nlop-help { margin:8px 0 0; color:var(--nlop-muted); font-size:11px; line-height:1.5; }
#nlsyp-page .nlop-selected { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; font-size:12px; line-height:1.45; }
#nlsyp-page .nlop-selected > span { min-width:0; overflow-wrap:anywhere; }
#nlsyp-page .nlop-remove, #nlsyp-page .nlop-retry { min-height:36px; flex-shrink:0; padding:6px 8px; border:0; background:none; color:var(--nlop-red); text-decoration:underline; font-family:inherit; font-size:12px; cursor:pointer; }
#nlsyp-page .nlop-proof { display:flex; gap:11px; align-items:center; min-width:0; padding:12px 0; border-bottom:1px solid #dedbd3; }
#nlsyp-page .nlop-file-icon { display:flex; align-items:center; justify-content:center; width:35px; height:39px; flex-shrink:0; border:1px solid var(--nlop-line); border-radius:4px; background:#fff; color:var(--nlop-muted); font-size:10px; font-weight:700; }
#nlsyp-page .nlop-proof-copy { min-width:0; flex:1; }
#nlsyp-page .nlop-proof-copy strong { display:block; overflow-wrap:anywhere; color:var(--nlop-ink); font-size:12px; line-height:1.5; font-weight:600; }
#nlsyp-page .nlop-proof-copy > span { display:block; margin-top:3px; color:var(--nlop-muted); font-size:11px; line-height:1.5; }
#nlsyp-page .nlop-download { min-height:36px; padding:6px 9px; flex-shrink:0; border:1px solid var(--nlop-line); border-radius:4px; background:#fff; color:var(--nlop-ink); font-family:inherit; font-size:11px; cursor:pointer; }
#nlsyp-page .nlop-review-note { margin:12px 0 0; padding-left:11px; border-left:2px solid var(--nlop-amber); color:var(--nlop-ink); font-size:12px; line-height:1.65; }
#nlsyp-page .nlop-action-error { margin:12px 0 0; color:var(--nlop-red); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
#nlsyp-page .nlop-delivery-note { margin:14px 0 0; padding-top:12px; border-top:1px solid #dedbd3; color:var(--nlop-ink); font-size:11px; line-height:1.65; }
#nlsyp-page .is-paid .nlop-delivery-note { color:var(--nlop-green); font-weight:600; font-size:12px; }
#nlsyp-page .nlop-progress { margin:0 0 23px; color:var(--nlop-ink); }
#nlsyp-page .nlop-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:15px; margin:0 0 18px; padding:0; }
#nlsyp-page .nlop-steps li { display:flex; align-items:center; gap:11px; min-width:0; margin:0; padding:14px 0; border-bottom:2px solid var(--nlop-line); color:var(--nlop-muted); }
#nlsyp-page .nlop-step-icon { display:grid; place-items:center; width:39px; height:39px; flex-shrink:0; border-radius:50%; background:#fff4dd; color:var(--nlop-amber); }
#nlsyp-page .nlop-step-icon svg { display:block; width:21px; height:21px; }
#nlsyp-page .nlop-step-icon .nlop-mark-check { display:none; }
#nlsyp-page .nlop-steps li > div { min-width:0; }
#nlsyp-page .nlop-steps strong { display:block; font-size:12px; line-height:1.4; font-weight:600; }
#nlsyp-page .nlop-steps li div > span { display:block; margin-top:5px; font-size:11px; line-height:1.4; }
#nlsyp-page .nlop-steps li.is-active { color:var(--nlop-ink); border-bottom-color:var(--nlop-amber); }
#nlsyp-page .nlop-steps li.is-pending { border-bottom-color:#eadab6; }
#nlsyp-page .nlop-steps li.is-pending.is-active { border-bottom-color:var(--nlop-amber); }
#nlsyp-page .nlop-steps li.is-done { color:var(--nlop-ink); border-bottom-color:var(--nlop-green); }
#nlsyp-page .nlop-steps li.is-done .nlop-step-icon { background:#edf8f0; color:var(--nlop-green); }
#nlsyp-page .nlop-steps li.is-done .nlop-mark-clock { display:none; }
#nlsyp-page .nlop-steps li.is-done .nlop-mark-check { display:block; }
#nlsyp-page .nlop-status-panel { display:flex; align-items:start; gap:14px; padding:16px 18px; border:1px solid #efcece; border-radius:5px; background:#fff7f7; }
#nlsyp-page .nlop-status-panel strong { display:block; color:var(--nlop-ink); font-size:13px; line-height:1.5; font-weight:600; }
#nlsyp-page .nlop-status-panel p { margin:5px 0 0; color:var(--nlop-muted); font-size:12px; line-height:1.6; }
#nlsyp-page .nlop-status-dot { width:8px; height:8px; flex-shrink:0; margin:6px 0 0; border-radius:50%; background:var(--nlop-red); animation:nlop-pulse 2.4s ease-in-out infinite; }
#nlsyp-page .nlop-network { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:10px; padding:9px 12px; border:1px solid var(--nlop-line); border-radius:4px; background:#fff; color:var(--nlop-muted); font-size:12px; line-height:1.5; }
#nlsyp-page .nlop-admin { margin:17px 0 0; padding:18px; border:1px solid var(--nlop-line); border-radius:5px; background:#f8f8f8; }
#nlsyp-page .nlop-admin-heading > span { display:flex; align-items:center; gap:6px; margin-bottom:7px; color:var(--nlop-muted); font-size:11px; }
#nlsyp-page .nlop-admin-heading > span svg { width:15px; height:15px; flex-shrink:0; }
#nlsyp-page .nlop-admin-hint, #nlsyp-page .nlop-admin-feedback { margin:10px 0 12px; color:var(--nlop-muted); font-size:12px; line-height:1.65; }
#nlsyp-page .nlop-receipt-check { display:flex; align-items:start; gap:10px; margin:0 0 13px; color:var(--nlop-ink); font-size:12px; line-height:1.65; }
#nlsyp-page .nlop-receipt-check input { width:16px; height:16px; flex-shrink:0; margin:3px 0 0; accent-color:var(--nlop-green); }
#nlsyp-page .nlop-confirm { background:var(--nlop-green); border-color:var(--nlop-green); }
@keyframes nlop-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(211,38,38,.1); } 50% { box-shadow:0 0 0 7px rgba(211,38,38,.025); } }
@media (prefers-reduced-motion:reduce) { #nlsyp-page .nlop-status-dot, #nlsyp-page .nlop-badge::before { animation:none; } #nlsyp-page .nlop-button { transition:none; } }
@media (max-width:900px) {
  #nlsyp-page .nlsyp-page-top.nlop-has-payment { grid-template-columns:minmax(0,1fr); gap:17px; }
  #nlsyp-page .nlsyp-page-top.nlop-has-payment > div:first-child, #nlsyp-page .nlsyp-page-top.nlop-has-payment > .nlop-card, #nlsyp-page .nlsyp-page-top.nlop-has-payment > .nlsyp-back { grid-column:1; grid-row:auto; }
}
@media (max-width:620px) {
  #nlsyp-page .nlop-card { padding:17px 16px; }
  #nlsyp-page .nlop-steps { gap:9px; }
  #nlsyp-page .nlop-steps li { flex-direction:column; align-items:start; gap:9px; }
  #nlsyp-page .nlop-steps strong { font-size:11px; }
  #nlsyp-page .nlop-step-icon { width:34px; height:34px; }
  #nlsyp-page .nlop-step-icon svg { width:19px; height:19px; }
  #nlsyp-page .nlop-status-panel { padding:15px; }
  #nlsyp-page .nlop-admin { padding:16px; }
}
@media (max-width:430px) {
  #nlsyp-page .nlop-card-heading { flex-direction:column; gap:4px; }
  #nlsyp-page .nlop-proof-label { max-width:none; text-align:left; }
  #nlsyp-page .nlop-upload-row { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
  #nlsyp-page .nlop-file-picker, #nlsyp-page .nlop-button { width:100%; min-height:44px; }
  #nlsyp-page .nlop-proof { flex-wrap:wrap; }
  #nlsyp-page .nlop-download { margin-left:46px; min-height:44px; }
  #nlsyp-page .nlop-remove, #nlsyp-page .nlop-retry { min-height:44px; }
}