/* ===============  NOVIC ONBOARDING (LIGHT)  =================
   Palette: #49505C #131922 #FFFFFF #4B5563 #2A05FF #D9D9D9 #DBDDE0 #000000
   Fonts:  Montserrat (titles & section labels)
           Roboto     (field labels & small descriptions)
           Inter      (body, inputs, long text)
================================================================ */

/* Root tokens */
:root{
  --bg: #FFFFFF;
  --ink: #131922;
  --ink-weak: #4B5563;
  --ink-muted: #49505C;
  --brand: #2A05FF;
  --border: #DBDDE0;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --input-bg: #FFFFFF;
  --pill: #D9D9D9;
}

/* Global */
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  max-width: 100vw;
  overflow-x: hidden;

}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* -------------------- Hero banner --------------------------- */
/* use image exactly as a cover; NO overlays */
.onboarding-hero{
  width:100%;
  min-height:320px;              /* enough space for top text inside image */
  background:url('/img/banners/novic_onboarding.png') center/cover no-repeat;
}

/* -------------------- Card container ------------------------ */
.onboarding-wrap{padding:0 16px;}
.onboarding-card{
  max-width:980px;
  margin:-180px auto 48px;        /* overlap the image like your mock */
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
}

/* Header row with title + stepper to the right */
.card-head{display:flex;align-items:center;gap:12px;}
.card-head h2{
  flex:1;margin:0;
  font:400 16px/1.2 Montserrat, sans-serif;
  letter-spacing:.2px;color:var(--ink);
}

/* Stepper (1 • 2 • 3) */
.wizard-steps{display:flex;gap:18px;}
.wizard-steps .dot{
  width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  border:2px solid var(--border);
  background:#FFFFFF;
  color:var(--ink-weak);
  font:700 13px/1 Montserrat, sans-serif;
}
.wizard-steps .dot.is-active{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.wizard-steps .dot.is-done{
  background:#f4f4ff; border-color:var(--brand); color:var(--brand);
}

/* -------------------- Typography ---------------------------- */
h3{
  margin:10px 0 12px;
  font:700 22px/1.25 Montserrat, sans-serif;
  color:var(--ink);
}
label{
  display:block; margin:0 0 6px;
  font:600 13px/1.2 Roboto, sans-serif;
  color:var(--ink-weak);
}
.help{
  margin-top:4px;
  font:400 12px/1.35 Roboto, sans-serif;
  color:var(--ink-muted);
}
p{font:400 14px/1.55 Inter, sans-serif; color:var(--ink);}

/* -------------------- Grid ---------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}

/* -------------------- Inputs --------------------------- */
input,select{
  width:100%; height:48px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 12px; /* Remove vertical padding, keep horizontal */
  color:var(--ink);
  font:400 14px/1.4 Inter, sans-serif;
  outline:none;
  box-sizing:border-box;
}
input::placeholder{
  color:#8a8f99;
  font:400 14px/1.4 Inter, sans-serif;
  opacity:1;
}
.form-grid > div,
.form-grid > .full {
  margin-bottom: 0; /* Remove extra spacing between fields */
}
input, select {
  margin-bottom: 0; /* Remove extra margin between inputs */
}
select{appearance:none; background-image: none;}
input:focus,select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(42,5,255,.08);}

/* Read-only USD pill (right tone from your UI) */
.usd-pill{
  height:48px; border-radius:10px;
  background:var(--pill); color:var(--ink);
  display:grid; place-items:center;
  font:700 14px/1 Montserrat, sans-serif;
  border:1px solid var(--border);
}

/* Branding camera chip */
.brand-upload{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  border:1px dashed var(--border);
  background:#FFFFFF;color:var(--ink);
  cursor:pointer;
}
.brand-upload img{width:100%;height:100%;object-fit:contain;border-radius:50%;}

/* -------------------- Errors --------------------------- */
.input.is-invalid, input.is-invalid, select.is-invalid{border-color:#d93025;}
.field-error{color:#d93025;font:400 12px/1.3 Inter, sans-serif;margin-top:6px;}

/* -------------------- Buttons -------------------------- */
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;}
.btn{padding:12px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;font:600 14px/1 Roboto, sans-serif;}
.btn.primary{background:var(--brand);color:#fff;}
.btn.secondary{background:#FFFFFF;color:var(--ink);border-color:var(--border);}
.btn.reset{background:#DBDDE0;color:#000;}

/* -------------------- Separator -------------------------- */
.card-separator {
  width: 100%;
  height: 0;
  border-bottom: 1.5px solid var(--border);
  margin: 18px 0 24px 0;
  background: none;
}

/* --- Make country, organization type, and domain/website share one row --- */
@media (min-width: 861px) {
  .form-grid .row-3-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    grid-column: 1 / -1; /* span full width of grid */
    margin-bottom: 0;
  }
  .form-grid .row-3-cols > div {
    margin-bottom: 0;
  }
}

/* Two-column row for physical address + secondary contact */
@media (min-width: 861px) {
  .form-grid .row-2-cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  .form-grid .row-2-cols > div {
    margin-bottom: 0;
  }
}

/* Newsletter checkbox row */
.newsletter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0 0;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--ink-weak);
  grid-column: 1 / -1;
}
.newsletter-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
}
.newsletter-row label {
  margin: 0;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--ink-weak);
  cursor: pointer;
}

/* Disclaimer and terms checkboxes row */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0 0;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--ink-weak);
  grid-column: 1 / -1;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
}
.checkbox-row label {
  margin: 0;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--ink-weak);
  cursor: pointer;
}

/* Reduce gap between disclaimer and terms checkboxes */
.checkbox-row + .checkbox-row {
  margin-top: 4px;
}

/* --- Password field with eye toggle --- */
.pw-field { position: relative; }
.pw-field input { padding-right: 46px; }         /* keep your 48px height; add room for icon */

.pw-toggle {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: #4B5563;                                   /* your palette */
  border-radius: 8px;
}
.pw-toggle:hover, .pw-toggle:focus { color: #2A05FF; outline: none; }
.pw-toggle:focus { box-shadow: 0 0 0 3px rgba(42,5,255,.12); }

.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .icon-hide { display: none; }           /* default: hidden icon off */
.pw-toggle[aria-pressed="true"] .icon-show { display: none; }
.pw-toggle[aria-pressed="true"] .icon-hide { display: inline; }

/* -------------------- Mobile --------------------------- */
@media (max-width: 860px){
  .form-grid{grid-template-columns:1fr;}
  .onboarding-card{margin:-180px 0 28px;border-radius:12px;
  }
  .wizard-steps{
    gap:10px;
  }
}

/* Centered footer */
.onboarding-footer {
  width: 100%;
  box-sizing: border-box;
  margin: 40px 0 20px 0;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  font: 400 13px/1.4 Inter, sans-serif;
  color: var(--ink-muted);
  background: none;
}
.onboarding-footer > div {
  display: flex;
  align-items: center;
}
.onboarding-footer .footer-links a {
  color: var(--brand);
  text-decoration: none;
  margin-left: 18px;
  font: 400 13px/1.4 Inter, sans-serif;
}
.onboarding-footer .footer-links a:hover {
  text-decoration: underline;
}

/* -------- Success / Result -------- */
.result-wrap {
  padding: 0 16px;
}
.result-card {
  max-width: 720px;
  margin: -160px auto 48px; /* overlap hero & match onboarding card rhythm */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px 28px 26px;
  text-align: center;
}
.result-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  margin: -44px auto 10px; /* float over the card top */
  background: #f4f4ff; color: var(--brand);
  border: 1px solid var(--border);
}
.result-icon.ok { background: #ecfff5; color: #067647; }       /* green tone */
.result-icon.pending { background: #fff7e6; color: #b54708; } /* amber tone */
.result-icon svg { width: 28px; height: 28px; }

.result-title {
  margin: 8px 0 6px;
  font: 700 22px/1.25 Montserrat, sans-serif;
  color: var(--ink);
}
.result-sub {
  margin: 0 auto 10px;
  max-width: 560px;
  font: 400 14px/1.55 Inter, sans-serif;
  color: var(--ink-muted);
}

.status-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--ink-weak);
}
.status-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font: 700 12px/1 Montserrat, sans-serif;
  border: 1px solid var(--border);
}
.status-pill.green { background: #ecfff5; color: #067647; border-color: #b7f0cf; }
.status-pill.amber { background: #fff7e6; color: #b54708; border-color: #fbd9a0; }

.tips {
  margin: 12px 0 4px;
  text-align: left;
}
.tips-title {
  font: 600 13px/1.2 Roboto, sans-serif;
  color: var(--ink-weak);
  margin: 0 0 6px;
}
.tips ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font: 400 14px/1.55 Inter, sans-serif;
}
.tips li { margin: 6px 0; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 2px;
}
.btn { padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font: 600 14px/1 Roboto, sans-serif; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--border); }

.desktop-hint {
  margin: 12px 0 0;
  font: 400 12px/1.35 Roboto, sans-serif;
  color: var(--ink-muted);
  text-align: center;
}

@media (max-width: 860px){
  .result-card { margin: -160px 0 28px; }
}