/*!
 * NSO 2026 — form pages (contact / get involved / request help)
 * Requires nso-2026.css first (tokens, resets, buttons, chrome, page header).
 * All selectors namespaced `n26-`.
 *
 * NOTE ON !important: nso/css/custom.css sets
 *   input[type=text],input[type=email],...,select,textarea {
 *     height:60px!important; padding:20px!important; border-radius:8px!important; box-shadow:none!important }
 *   textarea { height:100px!important }
 * Those are bare element selectors, so they reach our fields regardless of
 * namespacing. The overrides below have to match that weight.
 */

/* ---------- layout ---------- */
.n26-formwrap{display:grid;grid-template-columns:1.4fr .6fr;gap:34px;align-items:start}
@media (max-width:980px){.n26-formwrap{grid-template-columns:1fr;gap:28px}}

.n26-formcard{
  background:#fff;border:1px solid var(--n26-line);border-radius:var(--n26-r-xl);
  padding:36px;box-shadow:var(--n26-shadow-sm);
}
.n26-formcard > h2{font-size:1.35rem;font-weight:600}
.n26-formcard > .n26-formcard-lede{margin-top:8px;font-size:15.2px;color:var(--n26-ink-soft)}
@media (max-width:560px){.n26-formcard{padding:26px 20px;border-radius:var(--n26-r-lg)}}

/* ---------- fields ---------- */
.n26-fields{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.n26-row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:640px){.n26-row2{grid-template-columns:1fr}}

.n26-field > label,
.n26-fieldset > legend{
  display:block;font-weight:600;font-size:14.4px;color:var(--n26-navy-800);margin-bottom:8px;padding:0;
}
.n26-req{color:#c0392b;margin-left:2px}
.n26-hint{display:block;font-weight:400;font-size:13.4px;color:var(--n26-ink-soft);margin-top:3px}

.n26-field input[type="text"],
.n26-field input[type="email"],
.n26-field input[type="password"],
.n26-field input[type="tel"],
.n26-field input[type="number"],
.n26-field input[type="search"],
.n26-field input[type="url"],
.n26-field input[type="date"],
.n26-field select,
.n26-field textarea{
  width:100%;
  height:auto!important;
  padding:13px 15px!important;
  border:1.5px solid var(--n26-line)!important;
  border-radius:var(--n26-r-sm)!important;
  background:#fff;
  font-family:var(--n26-font-body);font-size:15.6px;color:var(--n26-ink);
  line-height:1.4;
  transition:border-color .16s ease,box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.n26-field textarea{min-height:130px!important;resize:vertical}
.n26-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px!important;
}
.n26-field input:focus,
.n26-field select:focus,
.n26-field textarea:focus{
  border-color:var(--n26-blue-500)!important;
  box-shadow:0 0 0 3px rgba(2,133,216,.14)!important;
  outline:none;
}
.n26-field input::placeholder,
.n26-field textarea::placeholder{color:#98a2b3}

/* jQuery Validate messages (custom.css already colours label.error red) */
.n26-formcard label.error{
  display:block;margin-top:6px;font-size:13.4px;font-weight:500;
}
.n26-formcard input.error,
.n26-formcard select.error,
.n26-formcard textarea.error{border-color:#e65353!important}

/* ---------- checkbox / radio groups ---------- */
.n26-fieldset{border:0;margin:0;padding:0;min-width:0}
.n26-choices{display:flex;flex-wrap:wrap;gap:10px}
.n26-choice{position:relative}
.n26-choice input{position:absolute;opacity:0;width:0;height:0}
.n26-choice span{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 16px;border:1.5px solid var(--n26-line);border-radius:999px;
  font-size:14.6px;color:var(--n26-ink);background:#fff;transition:.16s;
}
.n26-choice span::before{
  content:"";width:15px;height:15px;border:1.5px solid #c3cad6;border-radius:4px;flex:none;transition:.16s;
}
.n26-choice input[type="radio"] + span::before{border-radius:50%}
.n26-choice span:hover{border-color:var(--n26-blue-400);background:var(--n26-blue-50)}
.n26-choice input:checked + span{border-color:var(--n26-navy-800);background:var(--n26-navy-800);color:#fff}
.n26-choice input:checked + span::before{
  background:var(--n26-gold-500);border-color:var(--n26-gold-500);
}
.n26-choice input:focus-visible + span{outline:3px solid var(--n26-blue-500);outline-offset:3px}

/* ---------- file input ---------- */
.n26-file input[type="file"]{
  width:100%;font-family:var(--n26-font-body);font-size:14.6px;color:var(--n26-ink-soft);
  padding:12px 14px;border:1.5px dashed var(--n26-line);border-radius:var(--n26-r-sm);background:var(--n26-surface);
}
.n26-file input[type="file"]::file-selector-button{
  font-family:var(--n26-font-body);font-weight:600;font-size:14px;
  padding:9px 16px;margin-right:14px;border:0;border-radius:999px;
  background:var(--n26-navy-800);color:#fff;cursor:pointer;
}

/* ---------- captcha + submit ---------- */
.n26-captcha{margin-top:4px}
.n26-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.n26-form-note{font-size:13.6px;color:var(--n26-ink-soft);flex:1;min-width:200px}

/* ---------- aside ---------- */
.n26-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
@media (max-width:980px){.n26-aside{position:static}}
/* .n26-apanel / .n26-asteps / .n26-alist moved to nso-2026.css — shared with donate + cause pages */