/* =====================================================================
   NAKC — shared look for the public pages (landing, login, wizards)
   Load AFTER app-modern.min.css and after any inline <style> block.
   Presentation only: no element is hidden/shown from here, so the
   pages' own JS (continue buttons, tabs, validation) is untouched.
   ===================================================================== */
:root{
  --nk-bg:#f2f4f7; --nk-ink:#1d2433; --nk-muted:#6b7385; --nk-line:#e4e7ec;
  --nk-bar:#1b2130; --nk-accent:#c8102e;
  --nk-green:#22a55a; --nk-green-d:#15803d; --nk-blue:#2b9fd6; --nk-blue-d:#1b7fc0;
  --nk-amber:#f6a823; --nk-red:#e03c3c;
}
html,body{background:var(--nk-bg)!important;color:var(--nk-ink)}
body.nk{padding-top:62px;min-height:100vh;display:block!important}

/* ---------- Top bar ---------- */
.nk-bar{position:fixed;inset:0 0 auto 0;height:58px;z-index:1030;background:var(--nk-bar);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:3px solid var(--nk-accent)}
.nk-brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none}
.nk-brand img{height:34px;width:34px;border-radius:50%;background:#fff1}
.nk-brand b{font-size:1.05rem;letter-spacing:.04em;color:#fff}
.nk-brand small{display:block;color:#ffffff8c;font-size:.72rem;line-height:1;margin-top:2px}
.nk-barbtn{border:1px solid #ffffff2e;background:transparent;color:#ffffffd9!important;border-radius:10px;
  height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;font-size:.85rem;text-decoration:none}
.nk-barbtn:hover{background:#ffffff14;color:#fff!important}
.nk-barbtn i{font-size:1.1rem}

/* ---------- Centered gate / landing cards ---------- */
.landing-wrap{min-height:0!important;background:transparent!important;display:block}
[hidden],.landing-wrap[hidden]{display:none!important}
#gate,.nk-center{min-height:calc(100vh - 62px)!important;min-height:calc(100dvh - 62px)!important;padding:24px 16px!important;display:flex;align-items:center;justify-content:center}
#gate .card,.nk-card{max-width:520px!important;width:100%;border:0!important;border-radius:20px!important;overflow:hidden;
  background:#fff;box-shadow:0 24px 60px -24px #1d243359!important;padding:0!important;margin:0}
#gate .card>.card-body{padding:0!important;text-align:left!important}
.nk-hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:26px 22px 22px;
  background:linear-gradient(135deg,#34405e,#1b2130)}
.nk-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:#ffffff12}
.nk-hero::before{content:"";position:absolute;left:-30px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:#ffffff0d}
.nk-hero img{width:86px;height:86px;border-radius:50%;background:#fff;padding:4px;box-shadow:0 8px 20px -6px #0007;position:relative;z-index:1}
.nk-hero h4{color:#fff;margin:12px 0 4px;font-weight:800;letter-spacing:.04em;position:relative;z-index:1}
.nk-hero p{color:#ffffffc2;margin:0;font-size:.9rem;position:relative;z-index:1}
.nk-hero.green{background:linear-gradient(135deg,#22b35e,#15803d)}
.nk-hero.blue{background:linear-gradient(135deg,#39b4e6,#1b7fc0)}
.nk-hero.teal{background:linear-gradient(135deg,#17c2b5,#0b8a85)}
.nk-body{padding:22px}
.nk-body .border.rounded{border:0!important;padding:0!important}
.nk-foot{padding:14px 22px;background:#f8f9fb;border-top:1px solid var(--nk-line);font-size:.85rem;color:var(--nk-muted);text-align:center}
.nk-note{display:flex;gap:10px;align-items:flex-start;background:#eef7ff;border-radius:12px;padding:12px 14px;font-size:.9rem;color:#16486e}
.nk-note i{font-size:1.2rem;color:var(--nk-blue-d)}

/* Success / result panels */
.nk-result{text-align:center;padding:6px 4px 18px;margin-bottom:16px;border-bottom:1px dashed var(--nk-line)}
.nk-result .ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-size:2.1rem;color:#fff;
  background:linear-gradient(135deg,#22b35e,#15803d);box-shadow:0 10px 24px -8px #15803d}
.nk-result h5{font-weight:800;margin:0 0 4px}
.nk-result p{color:var(--nk-muted);margin:0;font-size:.92rem}
.nk-flash .alert{border-radius:12px;margin:0 0 16px!important}

/* ---------- Form controls ---------- */
.form-control,.form-select{border-radius:12px!important;border-width:1.5px}
.form-floating>.form-control,.form-floating>.form-select{height:calc(3.6rem + 2px);min-height:calc(3.6rem + 2px)}
.form-floating>textarea.form-control{height:auto}
.form-floating>label{color:#7a8294}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 4px #2b9fd626!important;border-color:var(--nk-blue)!important}
/* Fields stay white — only the border colour changes (keeps floating labels clean) */
.form-control,.form-select,input[readonly].form-control,.form-control:disabled{background-color:#fff!important}
input[readonly].form-control{color:#4a5263}
/* Kill the browser autofill tint (Safari/Chrome paint filled fields blue/yellow) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:var(--nk-ink)!important;caret-color:var(--nk-ink);transition:background-color 99999s ease-out 0s}
input:autofill{background-color:#fff!important}
/* Floating label: no white 'chip' behind the label text */
.form-floating>label::after,.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after{background-color:transparent!important}
.btn{border-radius:12px}
.btn-lg{padding:.8rem 1.4rem;font-weight:700}

/* ---------- Wizard shell ---------- */
.content>.container-fluid{max-width:960px;margin:0 auto;padding:0 12px!important}
.content.mt-3{margin-top:16px!important}
#progressbarwizard{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -28px #1d243359}

/* Step header */
#progressbarwizard .form-wizard-header{background:linear-gradient(135deg,#2a3550,#1b2130);margin:0!important;padding:16px 8px 12px!important;border:0}
#progressbarwizard .form-wizard-header .nav-item{position:relative}
#progressbarwizard .form-wizard-header .nav-item+.nav-item::before{content:"";position:absolute;top:21px;left:-50%;width:100%;height:2px;background:#ffffff26;z-index:0}
#progressbarwizard .form-wizard-header .nav-link{background:transparent!important;color:#ffffff80!important;border:0!important;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 2px!important;font-size:.68rem;font-weight:800;letter-spacing:.08em;position:relative;z-index:1}
#progressbarwizard .form-wizard-header .nav-link i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0!important;
  background:#2a3448;border:2px solid #ffffff33;color:#ffffffb3;font-size:19px!important;transition:all .2s}
#progressbarwizard .form-wizard-header .nav-link.active{color:#fff!important}
#progressbarwizard .form-wizard-header .nav-link.active i{background:var(--nk-green);border-color:#7be0a6;color:#fff;box-shadow:0 0 0 5px #22a55a40}
#progressbarwizard .form-wizard-header .nav-link.nk-done{color:#ffffffcc!important}
#progressbarwizard .form-wizard-header .nav-link.nk-done i{background:var(--nk-blue);border-color:#8fd0f0;color:#fff}
#progressbarwizard .form-wizard-header .nav-item.nk-done-line::before{background:var(--nk-blue)}
.nk-steplabel{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 20px;background:#f8f9fb;border-bottom:1px solid var(--nk-line);font-size:.85rem;color:var(--nk-muted)}
.nk-steplabel b{color:var(--nk-ink);letter-spacing:.04em}

/* Progress bar: thin, full width */
#progressbarwizard .tab-content{padding:0 22px 22px!important}
#progressbarwizard #bar{height:5px!important;border-radius:0;margin:0 -22px 20px!important;background:#e9edf2}
#progressbarwizard #bar .progress-bar{background:linear-gradient(90deg,var(--nk-green),var(--nk-blue))!important;border-radius:0 4px 4px 0}

/* Step intro banners (first .alert in each step) */
#progressbarwizard .tab-pane .alert{border:0;border-radius:14px;border-left:6px solid currentColor;padding:14px 16px}
#progressbarwizard .tab-pane .alert h4{font-size:1.02rem;font-weight:800;letter-spacing:.02em;margin:0 0 4px;color:inherit;line-height:1.35}
#progressbarwizard .tab-pane .alert-info{background:#e8f5fc;color:#13608f}
#progressbarwizard .tab-pane .alert-primary{background:#e9effd;color:#2447a8}
#progressbarwizard .tab-pane .alert-warning{background:#fff4e0;color:#93540a}
#progressbarwizard .tab-pane .alert-danger{background:#fdecec;color:#a11d1d}
#progressbarwizard .tab-pane .alert-success{background:#e7f6ee;color:#146c3c}
#progressbarwizard .tab-pane .alert-light{background:#f5f7fa;color:var(--nk-ink);border-left-color:#c3c9d4}
#progressbarwizard .tab-pane .container{padding:0;max-width:none}
#progressbarwizard .tab-pane .bg-info-lighten{background:transparent!important;padding:0!important}

/* Legal text (PIPEDA list, photo text, waiver sections) */
#progressbarwizard ol,#photo-consent-text,#section-1-2,#section-3-5,#section-6-8{
  background:#fbfcfd;border:1px solid var(--nk-line);border-radius:14px;padding:16px 18px;font-size:.9rem;line-height:1.55;color:#3a4254}
#progressbarwizard ol{padding-left:36px}
#progressbarwizard ol li+li{margin-top:8px}
#section-1-2,#section-3-5,#section-6-8{margin-bottom:12px}
#section-1-2 .alert-warning,#section-3-5 .alert-warning,#section-6-8 .alert-warning{border-left-width:4px!important;font-size:.85rem}
#section-1-2 h4,#section-1-2 h5,#section-3-5 h5,#section-6-8 h5,#photo-consent-text h5{color:var(--nk-ink);font-weight:800}

/* Checkbox / radio rows become big tappable cards */
#progressbarwizard .tab-pane .form-check{background:#fff;border:1.5px solid #dfe3ea;border-radius:14px;
  padding:14px 14px 14px 52px!important;margin-bottom:12px!important;position:relative;transition:all .15s}
#progressbarwizard .tab-pane .form-check .form-check-input{width:1.5em;height:1.5em;margin:0;position:absolute;left:16px;top:14px;border-width:2px;border-color:#b7bfcc!important}
#progressbarwizard .tab-pane .form-check .form-check-label{margin-left:0!important;cursor:pointer;line-height:1.4}
#progressbarwizard .tab-pane .form-check:has(.form-check-input:checked){border-color:var(--nk-green);background:#eefaf3}
#progressbarwizard .tab-pane .form-check:has(.form-check-input:checked) .form-check-input{background-color:var(--nk-green);border-color:var(--nk-green)!important}
#progressbarwizard .tab-pane .form-check:has(.form-check-input:disabled){opacity:.5;background:#f5f6f8}
#progressbarwizard .tab-pane .form-checkbox-danger:has(.form-check-input:checked) .form-check-label{color:var(--nk-green-d)!important}
#progressbarwizard .tab-pane .form-checkbox-warning:has(.form-check-input:checked) .form-check-label{color:var(--nk-green-d)!important}
#photos-confirmed-no:checked{background-color:var(--nk-red)!important;border-color:var(--nk-red)!important}
#progressbarwizard .tab-pane .form-check:has(#photos-confirmed-no:checked){border-color:var(--nk-red);background:#fdf0f0}
fieldset legend{font-size:1rem!important;line-height:1.4;margin-bottom:12px}

/* Buttons row (Back / Continue / Submit) */
#progressbarwizard ul.pager.wizard{display:flex!important;align-items:center;gap:10px;padding:16px 0 0!important;margin:16px 0 0!important;border-top:1px solid var(--nk-line)}
#progressbarwizard ul.pager.wizard>li{float:none!important;margin:0!important}
#progressbarwizard ul.pager.wizard>li.next{margin-left:auto!important}
#progressbarwizard .tab-pane>br,#progressbarwizard .tab-pane .col-12>br{display:none}
#progressbarwizard .continue-btn,#progressbarwizard #submit-button{border:0;border-radius:12px;padding:.8rem 1.6rem;font-weight:800;letter-spacing:.03em;color:#fff!important;
  background:linear-gradient(135deg,#39b4e6,#1b7fc0);box-shadow:0 10px 22px -10px #1b7fc0}
#progressbarwizard #submit-button{background:linear-gradient(135deg,#22b35e,#15803d);box-shadow:0 10px 22px -10px #15803d;padding:.85rem 2.2rem}
#progressbarwizard .wizard-back,#progressbarwizard .nk-back,#progressbarwizard #cancel-registration{border-radius:12px;font-weight:700;border-width:1.5px}
#progressbarwizard ul.pager.wizard .btn{white-space:nowrap}
@media (max-width:575.98px){#progressbarwizard ul.pager.wizard .btn{padding:.75rem 1rem;font-size:.95rem}#progressbarwizard #submit-button{padding:.8rem 1.2rem}}
@media (max-width:575.98px){
  #progressbarwizard .tab-content{padding:0 14px 16px!important}
  #progressbarwizard #bar{margin:0 -14px 16px!important}
  #progressbarwizard .form-wizard-header .nav-link i{width:38px;height:38px;font-size:17px!important}
  #progressbarwizard .form-wizard-header .nav-item+.nav-item::before{top:19px}
  .nk-steplabel{padding:10px 14px}
  .content>.container-fluid{padding:0 8px!important}
  #progressbarwizard{border-radius:16px}
}

/* ---------- Landing (index) choice cards ---------- */
.nk-choice{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px;color:#fff!important;text-decoration:none;
  box-shadow:0 12px 24px -12px var(--sh);transition:transform .12s, box-shadow .12s;position:relative;overflow:hidden}
.nk-choice:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px var(--sh)}
.nk-choice::after{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:#ffffff17}
.nk-choice .ic{width:50px;height:50px;border-radius:14px;background:#ffffff2e;display:grid;place-items:center;font-size:1.6rem;flex-shrink:0}
.nk-choice b{display:block;font-size:1.05rem;letter-spacing:.03em}
.nk-choice small{display:block;color:#ffffffd0;font-size:.82rem;margin-top:2px}
.nk-choice .go{margin-left:auto;font-size:1.4rem;opacity:.85;position:relative;z-index:1}
.nk-choice.green{background:linear-gradient(135deg,#22b35e,#15803d);--sh:#15803d}
.nk-choice.blue{background:linear-gradient(135deg,#39b4e6,#1b7fc0);--sh:#1b7fc0}

/* ---------- Phones: no vertical centering, compact header card ---------- */
@media (max-width:767.98px){
  #gate,.nk-center{min-height:0!important;align-items:flex-start;padding:14px 12px 24px!important}
  .nk-hero{padding:18px 16px 16px}
  .nk-hero img{width:62px;height:62px;padding:3px}
  .nk-hero h4{font-size:1.15rem;margin-top:8px}
  .nk-hero p{font-size:.85rem}
  .nk-body{padding:16px}
  .nk-foot{padding:12px 16px}
  .nk-note{padding:10px 12px;font-size:.85rem}
  .content.mt-3{margin-top:10px!important}
  .content.mb-5{margin-bottom:20px!important}
}