/* Aryavart — Need blood page (form and cards come from contact.css) */
.nb-sec{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:26px 0 12px}
.ct-form h2 + .nb-sec{margin-top:18px}
.nb .cf input:focus,.nb .cf select:focus,.nb .cf textarea:focus{border-color:var(--crimson);box-shadow:0 0 0 3px var(--crimson-50)}
.ct-ic.bl{background:var(--crimson-50);color:var(--crimson)}
.sos-card .ct-link{color:#fff}
/* the free-of-charge promise as a slow moving banner above the form, faded at both ends */
.nb{padding-top:28px}
.nb-ticker{overflow:hidden;margin-bottom:28px;padding:12px 0;background:var(--crimson-50);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.nb-track{display:flex;width:max-content;animation:nbTick 90s linear infinite}
.nb-track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;font-size:15px;font-weight:500;color:var(--crimson-700)}
.nb-track svg{flex:none;color:var(--crimson);opacity:.7}
.nb-ticker:hover .nb-track{animation-play-state:paused}
@keyframes nbTick{to{transform:translateX(-50%)}}
@media (max-width:600px){.nb{padding-top:20px}.nb-ticker{margin-bottom:20px}}
.nb-steps{list-style:none;counter-reset:s;display:grid;gap:10px;margin-top:12px}
.nb-steps li{counter-increment:s;position:relative;padding-left:30px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.nb-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--crimson-50);color:var(--crimson);font-size:12px;font-weight:700;display:grid;place-items:center}
.nb-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.nb-share .btn{padding:9px 14px;font-size:14px}
#bsend{margin-top:22px;width:100%}
#bsend[disabled]{opacity:.6;cursor:wait}
.ct-done a{color:var(--crimson);font-weight:600}
.nb-ref{font-weight:600;color:var(--ink)!important;margin-top:-10px!important}
.nb-ref:empty{display:none}
/* phones and tablets: emergency card, then the form, then the other cards */
@media (max-width:1020px){
  .nb .ct-side{display:contents}
  .nb .sos-card{order:-1}
  .nb .ct-side .ct-card:not(.sos-card){order:1}
}
/* this page has no red banner in its footer (the emergency card is already at the top) */
.nb.ct{padding-bottom:64px}
footer.no-sos{padding-top:56px}

/* "Needed by": DD/MM/YYYY text box with a calendar button that opens the browser's date picker */
.datebox{position:relative;display:block}
.datebox input[type=text]{padding-right:50px}
.datebtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:8px;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.datebtn:hover{background:var(--bg);color:var(--crimson)}
.datebtn:focus-visible{outline:2px solid var(--crimson);outline-offset:1px}

/* the same short message in Hindi and Gujarati, under the intro */
.nb-lang{display:grid;gap:8px;margin-top:18px;padding-left:14px;border-left:2px solid var(--crimson-200)}
.nb-lang p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.nb-lang a{color:var(--crimson);font-weight:600;white-space:nowrap}