:root{--ink:#2b1a10;--brand:#a5521f;--brand-2:#8a4219;--peach:#fff2e9;--tint:#fff2e9;--ring:rgba(165,82,31,.25);--accent:#a5521f;--paper:#faf9f7;--sand:#f5ebe3;--line:#ddd8cf;--muted:#5d6475;--ok:#1f7a5a;--bad:#b3261e;
--bs-body-font-family:'Manrope',system-ui,sans-serif;--bs-body-bg:var(--paper);--bs-body-color:var(--ink)}
body{font-family:var(--bs-body-font-family);background:var(--paper);color:var(--ink)}
h1,h2,h3,.display-c{font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:700;line-height:1.05}
.auth{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;min-height:100vh}
.auth-aside{position:relative;background:var(--peach);color:var(--brand);padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth-aside::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(165,82,31,.07) 0 2px,transparent 2px 14px);-webkit-mask:linear-gradient(120deg,transparent 30%,#000);mask:linear-gradient(120deg,transparent 30%,#000)}
.auth-aside>*{position:relative}
.brand img{height:50px;width:auto}
/* .auth-aside .brand img{filter:brightness(0) invert(1)} */
.aside-title{font-size:clamp(2.2rem,4vw,3.4rem)}
.aside-flow{list-style:none;padding:0;margin:1.5rem 0 0;border-left:1px solid var(--accent)}
.aside-flow li{padding:.35rem 0 .35rem 1rem;color:var(--brand);font-size:.92rem}
.auth-main{padding:2.5rem clamp(1.25rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center;max-width:860px;width:100%;margin:auto}
.auth-main h2{font-size:2rem;color:var(--brand)}.lead-s{color:var(--muted)}
.role-switch{display:inline-flex;border:1px solid var(--brand);border-radius:999px;padding:3px;margin:1rem 0}
.role-switch button{border:0;background:none;border-radius:999px;padding:.5rem 1.4rem;font-weight:600;font-size:.9rem;color:var(--brand);transition:.2s}
.role-switch button.active{background:var(--brand);color:#fff}
.form-label{font-size:.8rem;font-weight:600;margin-bottom:.3rem}
.form-control,.form-select{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;background-color:#fff;font-size:.92rem}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.btn-az{background:var(--brand);color:#fff;border:1px solid var(--brand);border-radius:999px;padding:.7rem 1.8rem;font-weight:600;letter-spacing:.06em;font-size:.82rem;text-transform:uppercase}
.btn-az:hover{background:var(--brand-2);color:#fff}
.btn-az-o{background:transparent;color:var(--brand)}.btn-az-o:hover{background:var(--brand);color:#fff}
.btn-az:focus-visible,.role-switch button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:var(--brand);font-weight:600}
.pw-wrap{position:relative}.pw-wrap button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted)}
.stepper{display:flex;margin:1.2rem 0 2rem;padding:0;counter-reset:s}
.stepper li{flex:1;list-style:none;position:relative;text-align:center;font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.stepper li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:32px;height:32px;margin:0 auto .4rem;border-radius:50%;background:#fff;border:1px solid var(--line);position:relative;z-index:1;font-family:'Roboto Condensed';font-size:.95rem}
.stepper li::after{content:"";position:absolute;top:16px;left:-50%;width:100%;height:1px;background:var(--line)}
.stepper li:first-child::after{display:none}
.stepper li.active,.stepper li.done{color:var(--ink)}
.stepper li.active::before{background:var(--brand);color:#fff;border-color:var(--brand)}
.stepper li.done::before{content:"\2713";background:var(--ok);color:#fff;border-color:var(--ok)}
.step{display:none}.step.active{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.step.active{animation:none}}
.sect{font-size:1.15rem;margin:1.6rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.panel{background:var(--sand);border-radius:18px;padding:1.1rem 1.2rem}
.doc-row{display:flex;align-items:center;gap:.8rem;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;margin-bottom:.6rem}
.doc-row.ok{border-color:var(--ok)}.doc-row small{color:var(--muted)}
.charges td,.charges th{padding:.45rem .2rem;font-size:.88rem;border-color:var(--line)}
#sig{width:100%;height:130px;background:#fff;border:1px dashed var(--brand);border-radius:12px;touch-action:none}
.otp-in{width:46px;height:54px;text-align:center;font-size:1.3rem;border-radius:12px}
.verified{color:var(--ok);font-size:.8rem;font-weight:600}
.iti{width:100%}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-aside{padding:1.5rem;min-height:auto}.aside-flow,.aside-quote{display:none}.stepper li{font-size:0}.stepper li::before{font-size:.95rem}}
/* selectable option cards (owner/tenant, premise type, unit type, payment method) */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}
.opts.sm{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s;margin:0}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.opt .ic{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:1.25rem;flex:none}
.opt .t{font-weight:700;font-size:.95rem;line-height:1.2}.opt small{color:var(--muted);display:block;font-size:.78rem}
.opt::after{content:"";margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid #b9b4aa;flex:none;background:#fff}
.opt:has(input:checked){border-color:var(--brand);background:var(--tint)}
.opt:has(input:checked) .ic{background:var(--brand);color:#fff}
.opt:has(input:checked)::after{border:6px solid var(--brand)}
.opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.opts.sm .opt{padding:.7rem .8rem}.opts.sm .t{font-size:.88rem}
.total{background:var(--brand);color:#fff;border-radius:18px;padding:1rem 1.3rem;display:flex;justify-content:space-between;align-items:baseline}
.total b{font-family:'Roboto Condensed';font-size:2.2rem}

.Verify-btn-wrap .form-control,.Verify-btn-wrap  .form-select{border-top-right-radius: 0;border-bottom-right-radius: 0;}
.input-group .iti{flex:1 1 auto;width:1%;min-width:0}
#otpBox .otp-in{width:auto;flex:1 1 0;min-width:0;max-width:46px;padding:0}
.doc-row>div{min-width:0;overflow-wrap:anywhere}
/* ---------- responsive ---------- */
@media(max-width:900px){
.auth{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100vh;min-height:100dvh}
.auth-aside{padding:1rem 1.25rem;flex-direction:row;align-items:center}
.aside-title,.aside-flow,.aside-quote{display:none}
.brand img{height:30px}
.auth-main{justify-content:flex-start;padding:1.5rem 1.25rem 2rem;max-width:none}
.auth-main h2{font-size:1.6rem}
.stepper{margin:1rem 0 1.5rem}
.stepper li{font-size:0}.stepper li.active{font-size:.62rem;white-space:nowrap}
}
@media(max-width:575.98px){
.form-control,.form-select{font-size:16px}
.opts.sm{grid-template-columns:1fr 1fr}
.input-group .btn-az{padding-inline:.9rem}
.doc-row{flex-wrap:wrap}
.role-switch{display:flex}.role-switch button{flex:1;min-height:44px}
.sect{font-size:1.05rem}
.auth-main{padding-inline:1rem}
}

/* form navigation buttons */
.form-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem}
.nav-btns{display:flex;gap:.75rem}
@media(max-width:767.98px){
.form-nav{flex-direction:column-reverse;align-items:stretch}
.nav-btns{width:100%}.nav-btns .btn{flex:1 1 0}
.form-nav .btn{width:100%;min-height:48px;padding-inline:1rem}
}

.form-control[readonly]{background-color:var(--sand)}
.form-select:disabled{background-color:var(--sand);opacity:.7}

.pw-wrap{position:relative}.pw-wrap .form-control{padding-right:2.8rem}
.pw-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);width:40px;height:40px;display:grid;place-items:center}
.was-validated .pw-wrap:has(.form-control:invalid)+.invalid-feedback{display:block}
.divider{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.8rem;margin:1.2rem 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.doc-row .form-check-input{width:1.4rem;height:1.4rem;opacity:1;flex:none}

/* overview */
.ov-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem;margin-bottom:1rem}
.ov-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.ov-title{font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;font-size:1.02rem;font-weight:700;margin:0}
.ov-edit{border:0;background:none;font-weight:600;font-size:.82rem;text-decoration:underline;color:var(--brand);padding:.4rem .6rem;min-height:40px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem 1.2rem;margin:0}
.ov-grid dt,.ov-lbl{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .15rem}
.ov-grid dd{margin:0;font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.ov-sig{display:block;width:260px;max-width:100%;height:80px;object-fit:contain;border:1px dashed var(--line);border-radius:10px;background:#fff}

label.doc-row{cursor:pointer}
.doc-row.err{border-color:var(--bad)}

/* declaration validation */
#sig.is-invalid{border:1px solid var(--bad);background:#fff7f6}
.sig-err{display:none;color:var(--bad);font-size:.8rem;margin-top:.3rem}
#sig.is-invalid+.sig-err{display:block}

.auth-aside .aside-quote{opacity:1!important;color:var(--brand-2)}