/* ── CONTACT PAGE ── */
.contact-wrap{max-width:720px;margin:0 auto;padding:0 1.5rem 2.5rem}
.register-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.75rem 2rem;box-shadow:var(--shadow)}
.register-card-header{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.register-card-header i{font-size:26px;color:var(--cta)}
.register-card-header h2{font-size:19px;font-weight:400;color:var(--text);letter-spacing:-0.2px}
/* ── REGISTRATION STEP INDICATOR ── */
.reg-steps{display:flex;align-items:center;margin-bottom:1.75rem}
.reg-step{display:flex;align-items:center;gap:9px;flex-shrink:0}
.reg-step-circle{width:28px;height:28px;border-radius:50%;background:var(--page-bg);border:1px solid var(--border);color:var(--text-sub);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.reg-step-label{font-size:13px;font-weight:600;color:var(--text-sub);transition:color .2s;white-space:nowrap}
.reg-step.active .reg-step-circle{background:var(--cta);border-color:var(--cta);color:#fff}
.reg-step.active .reg-step-label{color:var(--text)}
.reg-step.done .reg-step-circle{background:var(--success);border-color:var(--success);color:#fff}
.reg-step.done .reg-step-label{color:var(--text)}
.reg-step-line{flex:1;height:2px;background:var(--border);margin:0 12px;transition:background .2s}
.reg-step-line.done{background:var(--success)}
@media(max-width:380px){.reg-step-label{display:none}}
/* ── REGISTRATION WIZARD (New Proposal / My Proposals, stepped UI) ── */
.reg-wiz-card{max-width:640px;margin:0 auto}
/* Compact stepper header (numbered node circles + count/label), a visual
   replacement for the old thin progress-bar segments. The legacy
   .reg-wiz-progress bar stays in the DOM (just hidden) purely so
   regWizUpdateHeader() in register.js keeps updating it unmodified —
   the circles are painted by a small addition at the end of that same
   function, so no existing wizard logic (navigation, validation,
   submit) changed at all, only what the header looks like. */
.reg-wiz-header{margin-bottom:20px;padding:4px 0 10px}
.step-nodes-row{display:flex;align-items:center;margin-bottom:10px}
.step-node-btn{background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;line-height:0}
.step-node-btn:disabled{cursor:default}
.step-node-circle{width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--border);color:var(--text-sub);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.step-node-circle.active{background:var(--cta);border-color:var(--cta);color:#fff;transform:scale(1.1)}
.step-node-circle.completed{background:var(--cta);border-color:var(--cta);color:#fff;font-size:15px}
.step-connector{flex:1;height:2px;min-width:10px;background:var(--border);margin:0 2px;transition:background .2s ease}
.step-connector.done{background:var(--cta)}
.reg-wiz-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
.reg-wiz-step-count{font-size:12px;font-weight:400;color:var(--text-sub)}
.reg-wiz-step-label{font-size:12px;font-weight:400;color:var(--cta)}
.reg-wiz-progress{display:flex;gap:4px}
.reg-wiz-progress-seg{flex:1;height:5px;border-radius:3px;background:var(--border);transition:background .2s ease}
.reg-wiz-progress-seg.done{background:var(--cta)}
.reg-wiz-step{display:none;flex-direction:column;gap:14px}
.reg-wiz-step.active{display:flex;animation:regWizStepIn .22s ease}
.reg-wiz-step .form-group{margin-bottom:0}
.reg-wiz-section-title{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:var(--text-sub)}
.reg-wiz-section-title:not(:first-child){margin-top:6px;padding-top:16px;border-top:1px solid var(--border)}
.reg-wiz-section-title i{font-size:14px;color:var(--cta)}
@keyframes regWizStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.reg-wiz-step.active{animation:none}}
.reg-wiz-nav{display:flex;gap:10px;margin-top:6px}
.reg-wiz-back-btn{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14.5px;font-weight:400;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reg-wiz-back-btn:hover{background:var(--page-bg)}
.reg-wiz-next-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border-radius:12px;border:none;background:var(--cta);color:#fff;font-size:14.5px;font-weight:400;cursor:pointer;transition:background .15s ease;-webkit-tap-highlight-color:transparent}
.reg-wiz-next-btn:hover:not(:disabled){background:var(--cta-hover)}
.reg-wiz-next-btn:disabled{background:var(--border);color:var(--text-sub);cursor:not-allowed}
.reg-wiz-verified-badge{display:none;align-items:center;gap:8px;background:var(--success-bg);border-radius:10px;padding:10px 12px}
.reg-wiz-verified-badge.show{display:flex}
.reg-wiz-verified-badge i{color:var(--success);font-size:16px}
.reg-wiz-verified-badge span{font-size:13.5px;color:var(--success);font-weight:400}
.reg-wiz-privacy-note{display:flex;gap:8px;font-size:12.5px;color:var(--text-sub);background:var(--page-bg);padding:8px 10px;border-radius:8px}
.reg-wiz-privacy-note i{flex-shrink:0;margin-top:1px}
.reg-wiz-photo-drop{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;border:1.5px dashed var(--border);background:var(--page-bg);transition:background .15s ease,border-color .15s ease}
.reg-wiz-photo-drop.drag-over{border-color:var(--cta);background:var(--info-bg)}
.reg-wiz-photo-title{font-size:13.5px;color:var(--text);font-weight:400}
.reg-wiz-browse-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:400;cursor:pointer}
.reg-wiz-remove-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;border:none;background:transparent;color:var(--danger);font-size:12.5px;font-weight:400;cursor:pointer}
.reg-wiz-summary{background:var(--page-bg);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.reg-wiz-summary-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.reg-wiz-summary-row .label{color:var(--text-sub)}
.reg-wiz-summary-row .value{color:var(--text);font-weight:400;text-align:right}
.reg-wiz-edit-link{align-self:flex-start;margin-top:4px;background:none;border:none;color:var(--cta);font-size:12.5px;font-weight:400;cursor:pointer;padding:0}
.reg-wiz-danger-zone{margin-top:6px;padding-top:20px;border-top:1px solid var(--border)}
.reg-wiz-danger-label{font-size:12.5px;font-weight:400;color:var(--text-sub);text-transform:uppercase;letter-spacing:.4px}
@media(max-width:480px){.reg-wiz-photo-drop{flex-direction:column;text-align:center}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{margin-bottom:14px}
.form-group label{font-size:13.5px;font-weight:400;color:var(--text-sub);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.form-group label i{font-size:15px;color:inherit}
.form-group input,.form-group textarea{width:100%;padding:17px 18px;border:1px solid var(--border);border-radius:14px;background:var(--page-bg);color:var(--text);font-size:16px;font-family:inherit;transition:all 0.15s;-webkit-appearance:none;appearance:none}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),0.12)}
/* ── CUSTOM DROPDOWN (Gender/Religion/Marriage Status/Caste/District) ──
   Native <select> was tried two ways (custom appearance + arrow, then
   plain native appearance) and on the target device neither reliably
   repainted the chosen option into the closed box, and the native popup
   itself was awkward to restyle to match the rest of the form. So these
   five fields are now a fully custom trigger+menu built by JS
   (buildCustomSelect, called once per field near the bottom of the
   script) — a plain button/div is never subject to any select-specific
   native rendering bug, and it can be styled to exactly match every
   other field. The original <select> is kept in the DOM (display:none)
   purely as the value/validation source so no other code had to change. */
.csel{position:relative}
.csel-trigger{width:100%;padding:17px 18px;border:1px solid var(--border);border-radius:14px;background:var(--page-bg);color:var(--text);font-size:16px;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;transition:all 0.15s;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.csel-trigger:focus{outline:none;border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),0.12)}
.csel-trigger.placeholder{color:var(--text-sub)}
.csel-trigger::after{content:'';width:16px;height:16px;flex-shrink:0;transition:transform 0.15s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E") no-repeat center/16px}
:root[data-theme="dark"] .csel-trigger::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E")}
.csel.open .csel-trigger::after{transform:rotate(180deg)}
.csel.open .csel-trigger{border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),0.12)}
.csel-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:240px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:50;padding:6px}
.csel.open .csel-menu{display:block}
.csel-opt{padding:11px 14px;border-radius:10px;font-size:15px;color:var(--text);cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent}
.csel-opt:hover,.csel-opt.active{background:var(--page-bg)}
.csel-opt.selected{color:var(--cta);font-weight:400}
.field-error{border-color:var(--danger)!important;background:var(--danger-bg)!important}
/* The real <select> behind a .csel dropdown is display:none — its own
   .field-error is invisible, so the error state is mirrored onto this
   wrapper (see regSetFieldError in register.js) and styled here instead. */
.csel.field-error .csel-trigger{border-color:var(--danger)!important;background:var(--danger-bg)!important}
.field-error:focus{box-shadow:0 0 0 3px rgba(204,0,0,0.12)!important}
.form-group textarea{resize:none;overflow:hidden;line-height:1.6;min-height:unset}
/* min-height only (no fixed height) — a floor autoGrow() can only grow
   past, never shrink below. Matches the single-line input/select boxes
   (rows="1" + a short placeholder now that the fuller example text
   lives in .field-hint below the box instead) so the list reads as one
   consistent size instead of a few boxes suddenly being taller. */
.form-group textarea.auto-grow{min-height:57px}
.field-hint{font-size:11px;color:var(--text-sub);margin-top:6px}
/* ── SOFT-BLUE PILL BUTTONS ──
   One consistent look for every button in the wizard (Continue, Back,
   Send code, Verify, Post Proposal, Browse files, account actions),
   replacing the previous mix of solid-filled Continue + outlined Back.
   Reuses the site's existing --info-* and --cta tokens (already used
   for tinted surfaces elsewhere) so dark mode works automatically. The
   !important matches each button's own base class (.btn, .btn-primary,
   .reg-wiz-next-btn, .fav-sync-cta-btn, etc.) regardless of which
   stylesheet loads first. */
.reg-wiz-pill-btn{background-color:var(--info-bg)!important;color:var(--cta)!important;border:1px solid var(--info-border)!important;border-radius:14px!important;font-weight:400!important}
.reg-wiz-pill-btn:hover:not(:disabled){background-color:var(--info-bg-hover)!important;color:var(--cta-hover)!important}
.reg-wiz-pill-btn:active:not(:disabled){transform:scale(0.99)}
.reg-wiz-pill-btn:disabled{opacity:.55!important;cursor:not-allowed}
/* Continue is the primary action on every wizard step — kept solid blue
   (its original look, pre-dating the soft-pill unification above) so it
   stands out from Back/secondary actions, which stay on the soft style. */
.reg-wiz-next-btn.reg-wiz-pill-btn{background-color:var(--cta)!important;color:#fff!important;border-color:var(--cta)!important}
.reg-wiz-next-btn.reg-wiz-pill-btn:hover:not(:disabled){background-color:var(--cta-hover)!important;color:#fff!important;border-color:var(--cta-hover)!important}
.reg-wiz-next-btn.reg-wiz-pill-btn:disabled{background-color:var(--border)!important;color:var(--text-sub)!important;border-color:var(--border)!important}
/* Photo placeholder is now plain text ("Photo") instead of an icon —
   size/color it to sit quietly inside the 72px circle. */
#reg-photo-preview{font-size:11px;color:var(--text-sub)}
/* Informational, always-checked "email is public" note under the email
   field — locked via preventUncheckEmail() in register.js; see the
   comment on the markup for why this doesn't change any real field. */
.reg-email-public-box{display:flex;align-items:flex-start;gap:8px;margin-top:8px;background:var(--page-bg);border:1px solid var(--border);padding:10px 12px;border-radius:10px;cursor:pointer}
.reg-email-public-box input{-webkit-appearance:checkbox;appearance:auto;width:16px;height:16px;min-width:16px;margin:2px 0 0 0;accent-color:var(--cta);cursor:pointer}
.reg-email-public-box label{font-size:12.5px;color:var(--text-sub);line-height:1.5;margin:0;cursor:pointer}
#email-public-warn{display:none;font-size:11.5px;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);padding:6px 10px;border-radius:8px;margin-top:6px}
#email-public-warn.show{display:block;animation:regEmailWarnIn .2s ease}
@keyframes regEmailWarnIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}