/* ============================================================
   NX — product request form (nx-request.js)
   A modal any product page can drop in. The palette is declared
   here rather than inherited, because this rides on pages with
   their own design systems (the plate-market page defines its own
   --ink/--line inside .pm) and the form must look the same on all
   of them. Namespaced .nxr-* so nothing collides.
   ============================================================ */
.nxr {
  --nxr-paper: #F6F7F9; --nxr-face: #FFFFFF; --nxr-ink: #0A1A2F;
  --nxr-ink-70: #3A4A60; --nxr-ink-50: #6B7888; --nxr-ink-30: #9AA6B6;
  --nxr-line: #DCE3EC; --nxr-blue: #144272; --nxr-green: #0B7A55;
  --nxr-gold: #8A6C22; --nxr-gold-soft: rgba(183, 144, 46, .08); --nxr-red: #B3373C;

  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  padding: 20px; overflow-y: auto;
  background: rgba(10, 26, 47, .58); backdrop-filter: blur(3px);
  font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  color: var(--nxr-ink);
}
.nxr[hidden] { display: none !important; }
.nxr * { box-sizing: border-box; }

.nxr-bx {
  background: var(--nxr-face); border-radius: 20px; width: min(620px, 100%);
  max-height: 92vh; overflow-y: auto; padding: 34px 32px; position: relative;
  box-shadow: 0 30px 70px rgba(10, 26, 47, .3); animation: nxr-rise .22s ease;
}
@keyframes nxr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nxr-bx { animation: none; } }

.nxr-bx h3 { font-family: "Noto Kufi Arabic", "Tajawal", system-ui, sans-serif;
  font-size: 24px; font-weight: 800; margin: 0; line-height: 1.35; letter-spacing: -.4px; }
.nxr-sub { color: var(--nxr-ink-70); font-size: 15.5px; line-height: 1.7; margin: 10px 0 24px; }
.nxr-x { position: absolute; inset-inline-end: 20px; top: 20px; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--nxr-line); background: var(--nxr-paper);
  color: var(--nxr-ink-50); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.nxr-x:hover { color: var(--nxr-ink); border-color: var(--nxr-ink-30); }

.nxr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .nxr-two { grid-template-columns: 1fr; } .nxr-bx { padding: 28px 20px; } }

.nxr-fld { margin-bottom: 14px; }
.nxr-fld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--nxr-ink-70); margin-bottom: 6px; }
.nxr-fld label i { font-style: normal; color: var(--nxr-ink-30); font-weight: 400; }
.nxr-fld input, .nxr-fld select, .nxr-fld textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--nxr-ink);
  background: var(--nxr-paper); border: 1.5px solid var(--nxr-line); border-radius: 11px;
  padding: 11px 13px; transition: border-color .15s;
}
.nxr-fld textarea { min-height: 88px; resize: vertical; }
.nxr-fld input:focus, .nxr-fld select:focus, .nxr-fld textarea:focus { outline: none; border-color: var(--nxr-blue); }
.nxr-err { display: none; font-size: 12.5px; color: var(--nxr-red); margin-top: 5px; }
.nxr-bad input, .nxr-bad select { border-color: var(--nxr-red); }
.nxr-bad .nxr-err { display: block; }

/* the partner code: visibly its own thing, so a client who has one does not miss it */
.nxr-ref { background: var(--nxr-gold-soft); border: 1px dashed rgba(183, 144, 46, .5);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 18px; }
.nxr-ref label { color: var(--nxr-gold); font-weight: 700; }
.nxr-ref input { background: var(--nxr-face); border-color: rgba(183, 144, 46, .35);
  font-family: ui-monospace, "JetBrains Mono", monospace; letter-spacing: .04em; }
.nxr-hint { font-size: 12.5px; color: var(--nxr-ink-50); margin-top: 7px; line-height: 1.6; }

.nxr-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; font: inherit; font-size: 16px; font-weight: 600; padding: 14px 26px;
  border-radius: 10px; border: 1.5px solid var(--nxr-ink); background: var(--nxr-ink);
  color: #fff; cursor: pointer; margin-top: 6px; transition: transform .12s ease; }
.nxr-send:hover { transform: translateY(-1px); }
.nxr-send[disabled] { opacity: .6; cursor: progress; transform: none; }
.nxr-legal { font-size: 12.5px; color: var(--nxr-ink-30); text-align: center; margin: 14px 0 0; line-height: 1.6; }

.nxr-done { text-align: center; padding: 24px 0 10px; }
.nxr-tick { width: 62px; height: 62px; border-radius: 50%; background: rgba(11, 122, 85, .1);
  display: grid; place-items: center; margin: 0 auto 18px; }
.nxr-tick svg { width: 30px; height: 30px; fill: none; stroke: var(--nxr-green);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nxr-done p { color: var(--nxr-ink-70); font-size: 15.5px; line-height: 1.75; margin: 10px 0 0; }