/* ============================================================================
 * brand2.css — modern visual overlay for the RONA r1 account-application.
 * Loaded AFTER brand.css on every flow page. Non-destructive: it only restyles
 * (higher specificity / later cascade); it changes no markup and no JS behaviour.
 * Respects the existing brand vars + dark mode ([data-theme="dark"]).
 * ==========================================================================*/
:root{
  --ra-navy:#00315c; --ra-blue:#0073b9; --ra-blue-600:#005ba8; --ra-blue-050:#eaf3fb;
  --ra-green:#0ab284; --ra-ink:#16202b; --ra-muted:#5b6b78; --ra-line:#e4e9ef;
  --ra-surface:#ffffff; --ra-ground:#f4f7fb; --ra-radius:16px; --ra-radius-sm:11px;
  --ra-shadow:0 1px 2px rgba(16,32,52,.05), 0 12px 30px rgba(16,32,52,.07);
  --ra-shadow-sm:0 1px 2px rgba(16,32,52,.05), 0 6px 16px rgba(16,32,52,.06);
  --ra-focus:0 0 0 4px rgba(0,115,185,.18);
}
[data-theme="dark"]{
  --ra-blue-050:#12243a; --ra-ink:#e7edf3; --ra-muted:#9aa8b5; --ra-line:#28323c;
  --ra-surface:#161d24; --ra-ground:#0e1418;
  --ra-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.4);
  --ra-shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.35);
}

body{ background:var(--ra-ground) !important; color:var(--ra-ink); }
#main-wrapper-bg{ background:transparent !important; }
#content{ padding-bottom:1rem; }

/* ---- header ---- */
#header.header-brand{
  background:var(--ra-surface); border-bottom:1px solid var(--ra-line);
  box-shadow:0 1px 0 rgba(16,32,52,.03); position:sticky; top:0; z-index:30;
}
#header .logo-img{ height:34px !important; }
#langSelect{ border-radius:9px; border:1px solid var(--ra-line); font-weight:600; }

/* ---- cards ---- */
.card{
  border:1px solid var(--ra-line) !important; border-radius:var(--ra-radius) !important;
  box-shadow:var(--ra-shadow) !important; background:var(--ra-surface);
}
.card .card-body{ padding:clamp(20px,3.4vw,38px) !important; }
.card-title{ color:var(--ra-ink); font-weight:800; letter-spacing:-.02em; }

/* ---- section headings inside the form ---- */
form h5{
  font-weight:800; letter-spacing:-.01em; color:var(--ra-ink);
  margin-top:26px; padding-top:22px; border-top:1px solid var(--ra-line);
}
form > h5:first-of-type, form .row:first-child h5{ border-top:0; padding-top:0; margin-top:0; }
form p{ color:var(--ra-muted); font-size:14px; }

/* ---- inputs ---- */
.form-label{ font-weight:650; font-size:13.5px; color:var(--ra-ink); margin-bottom:5px; }
.form-control, .form-select, .brand-select{
  border:1px solid var(--ra-line); border-radius:var(--ra-radius-sm);
  padding:11px 13px; font-size:15px; background:var(--ra-surface); color:var(--ra-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover{ border-color:#c6d2de; }
.form-control:focus, .form-select:focus, .brand-select:focus{
  border-color:var(--ra-blue); box-shadow:var(--ra-focus); outline:none;
}
.form-control::placeholder{ color:#9aa8b5; }
.input-group-text{ border-radius:var(--ra-radius-sm) 0 0 var(--ra-radius-sm); background:var(--ra-ground); border-color:var(--ra-line); color:var(--ra-muted); font-weight:600; }
.input-group > .form-control{ border-top-left-radius:0; border-bottom-left-radius:0; }
.form-text{ color:var(--ra-muted); font-size:12.5px; }

/* ---- radio / check as tappable pills ---- */
.form-check-input{ width:1.15em; height:1.15em; margin-top:.16em; border-color:#c6d2de; }
.form-check-input:checked{ background-color:var(--ra-blue); border-color:var(--ra-blue); }
.form-check-input:focus{ box-shadow:var(--ra-focus); border-color:var(--ra-blue); }
.form-check-label{ color:var(--ra-ink); }

/* business-type radios on new.html → card-style choices */
#newAppForm .form-check{
  border:1.5px solid var(--ra-line); border-radius:var(--ra-radius-sm); padding:14px 14px 14px 44px;
  transition:border-color .14s ease, background .14s ease; cursor:pointer;
}
#newAppForm .form-check:hover{ border-color:var(--ra-blue); background:var(--ra-blue-050); }
#newAppForm .form-check .form-check-input{ margin-left:-30px; margin-top:.25em; }
#newAppForm .form-check:has(.form-check-input:checked){ border-color:var(--ra-blue); background:var(--ra-blue-050); box-shadow:var(--ra-focus); }
#newAppForm .form-check-label{ font-weight:700; }

/* ---- buttons ---- */
.btn{ border-radius:11px; font-weight:700; letter-spacing:.1px; padding:11px 20px; transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn-lg{ padding:14px 22px; font-size:16px; }
.btn-primary{ background:var(--ra-blue) !important; border-color:var(--ra-blue) !important; box-shadow:0 2px 8px rgba(0,115,185,.28); }
.btn-primary:hover, .btn-primary:focus{ background:var(--ra-blue-600) !important; border-color:var(--ra-blue-600) !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,115,185,.34); }
.btn-primary:disabled{ background:#9db6cc !important; border-color:#9db6cc !important; box-shadow:none; transform:none; }
.btn-outline-primary, .btn-outline-all{ border:1.5px solid var(--ra-line) !important; color:var(--ra-blue) !important; background:var(--ra-surface) !important; }
.btn-outline-primary:hover, .btn-outline-all:hover{ border-color:var(--ra-blue) !important; background:var(--ra-blue-050) !important; color:var(--ra-blue-600) !important; transform:translateY(-1px); }
.btn-secondary{ border-radius:9px; }

/* ---- repeatable section blocks (bank / officer / project) ---- */
.bank-item, .officer-item, .project-item, .allowed-user-item{
  border:1px solid var(--ra-line) !important; border-radius:var(--ra-radius-sm) !important;
  background:var(--ra-ground); box-shadow:var(--ra-shadow-sm); padding:18px !important;
}
.bank-item .btn-close, .officer-item .btn-close, .project-item .btn-close{ opacity:.5; }

/* ---- the step progress widget (Start / Application / Terms / Conditions / Done) ---- */
.widget-steps{ margin-bottom:8px; }
.widget-steps .step-name{ font-weight:700; font-size:12.5px; color:var(--ra-muted); margin-bottom:8px; }
.widget-steps .step.active .step-name, .widget-steps .step.complete .step-name{ color:var(--ra-blue); }
.widget-steps .progress{ height:5px; background:var(--ra-line); border-radius:100px; overflow:visible; }
.widget-steps .progress .progress-bar{ background:var(--ra-blue); border-radius:100px; width:0; transition:width .3s ease; }
.widget-steps .step.complete .progress .progress-bar{ width:100%; }
.widget-steps .step.active .progress .progress-bar{ width:50%; }
.widget-steps .step-dot{
  display:block; width:14px; height:14px; border-radius:50%; margin:-9px auto 0;
  background:var(--ra-surface); border:2.5px solid var(--ra-line); position:relative; z-index:2;
}
.widget-steps .step.active .step-dot{ border-color:var(--ra-blue); box-shadow:var(--ra-focus); }
.widget-steps .step.complete .step-dot{ background:var(--ra-blue); border-color:var(--ra-blue); }
.widget-steps .step.disabled .step-name{ opacity:.75; }

/* ---- signature pad ---- */
#signature-pad{
  border:1.5px dashed #c6d2de !important; border-radius:var(--ra-radius-sm) !important;
  background:var(--ra-surface); max-width:460px !important;
}

/* ---- validation ---- */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid{ border-color:#e5533d; }
.invalid-feedback{ font-size:12.5px; font-weight:600; }

/* ---- feature bullets on the landing card ---- */
#content .d-flex .fs-2{ background:var(--ra-blue-050); width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:20px !important; }

/* ---- footer ---- */
#footer{ background:transparent; border-top:1px solid var(--ra-line); margin-top:34px; }
#footer .brand-nav-link{ color:var(--ra-muted); font-weight:600; text-decoration:none; }
#footer .brand-nav-link:hover{ color:var(--ra-blue); }
#footer .copyright-text{ color:var(--ra-muted); font-size:12.5px; }

/* ---- sample-autofill button (injected by enhance.js) ---- */
.rapp-autofill{
  display:inline-flex; align-items:center; gap:8px; border:1.5px dashed var(--ra-blue);
  background:var(--ra-blue-050); color:var(--ra-blue-600); border-radius:100px;
  padding:9px 16px; font:700 13.5px/1 inherit; cursor:pointer; transition:.14s;
}
.rapp-autofill:hover{ background:#dcebf8; transform:translateY(-1px); }
.rapp-autofill-wrap{ display:flex; justify-content:flex-end; margin:0 0 14px; }

/* ---- cookie banner: calmer, corner card instead of full-width wall ---- */
.cookie-consent.show{ max-width:420px; left:auto; right:20px; bottom:20px; border-radius:var(--ra-radius); box-shadow:var(--ra-shadow); }
.cookie-consent .btn{ font-size:13px; padding:8px 14px; }

/* ---- wizard steps (used in Stage 2; harmless until then) ---- */
.wiz-step{ display:none; } .wiz-step.wiz-active{ display:block; animation:wizIn .25s ease; }
@keyframes wizIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.wiz-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--ra-line); }
.wiz-mini{ display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ra-muted); font-weight:700; margin-bottom:14px; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }