/* ==========================================================================
   Prakriti Rakshak  |  join-us form, members list, edit dialog
   Loaded only on join-us.html. Colours inherit from style.css.
   ========================================================================== */

.pr-form{background:var(--kagaz);border:1px solid var(--rekha);border-top:4px solid var(--van);
  padding:28px 30px 26px;margin:1.4rem 0 0}
.pr-note{font-size:.92rem;color:var(--dhundh);margin:0 0 22px;padding-bottom:14px;border-bottom:1px dashed var(--rekha)}
.pr-note .req{color:var(--kesari-dk);font-weight:700}

.pr-set{border:0;padding:0;margin:0 0 6px}
.pr-set legend{
  font:700 .84rem var(--f-body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--van);padding:0 0 12px;
}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.pr-grid .wide{grid-column:1 / -1}

.f{margin:0 0 18px;min-width:0}
.f label{display:block;font:600 .92rem/1.5 var(--f-body);color:var(--van-dk);margin-bottom:6px}
.f .req{color:var(--kesari-dk)}
.f input[type=text],.f input[type=tel],.f input[type=email],.f select,.f textarea{
  width:100%;padding:10px 12px;border:1px solid #cfc7b4;background:#fffdf8;border-radius:2px;
  font:400 1rem var(--f-body);color:var(--syahi);
}
.f textarea{min-height:96px;resize:vertical}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--van) 50%),linear-gradient(135deg,var(--van) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--van-2);outline:2px solid rgba(92,168,59,.25)}
.f .hint{display:block;font-size:.85rem;color:var(--dhundh);margin-top:5px}
.f .err{display:none;font-size:.87rem;color:#b3261e;margin-top:5px}
.f.bad input,.f.bad select,.f.bad textarea,.f.bad .drop{border-color:#d0483c;background:#fff8f7}
.f.bad .err{display:block}

/* photo picker */
.drop{display:flex;align-items:center;gap:16px;border:1px dashed #c2b79c;background:#fffdf8;
  padding:14px 16px;border-radius:2px}
.drop .thumb{width:74px;height:74px;border-radius:50%;flex:none;object-fit:cover;
  border:2px solid var(--van);background:var(--dhoop-2);display:none}
.drop .thumb.is-on,
.drop img.thumb[src]:not([src=""]){display:block}
.drop .ph{width:74px;height:74px;border-radius:50%;flex:none;background:repeating-linear-gradient(45deg,var(--dhoop-2) 0 10px,#efe6d4 10px 20px);
  display:flex;align-items:center;justify-content:center;color:#a8977a;font-size:.72rem;text-align:center;padding:6px;line-height:1.25}
.drop .pick{flex:1;min-width:0}
.drop input[type=file]{display:block;width:100%;font:400 .92rem var(--f-body);margin-bottom:4px}
.drop .meta{font-size:.85rem;color:var(--dhundh);word-break:break-all}

/* declaration */
.decl{background:var(--dhoop-2);border:1px solid var(--rekha);border-left:4px solid var(--patta);
  padding:16px 18px;margin:6px 0 20px}
.decl label{display:flex;gap:12px;align-items:flex-start;font:400 .95rem/1.6 var(--f-body);color:var(--syahi);cursor:pointer}
.decl input{margin:5px 0 0;width:17px;height:17px;flex:none;accent-color:var(--van)}
.decl .en{display:block;color:var(--dhundh);font-size:.9rem;margin-top:4px}
.f.bad .decl{border-color:#d0483c}

/* captcha */
.cap{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:var(--dhoop-2);
  border:1px solid var(--rekha);padding:14px 16px;margin-bottom:6px}
.cap .sum{font:600 1.35rem var(--f-head);color:var(--van-dk);white-space:nowrap;padding-bottom:8px}
.cap input{width:110px !important}
.cap .redo{background:none;border:0;color:var(--van-2);font:600 .88rem var(--f-body);cursor:pointer;padding:0 0 10px;text-decoration:underline}
.cap .redo:hover{color:var(--kesari-dk)}

/* honeypot — hidden from people, visible to bots */
.pr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.pr-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--rekha);margin-top:8px}
.pr-status{font-size:.94rem;margin:0}
.pr-status.work{color:var(--dhundh)}
.pr-status.bad{color:#b3261e}
.pr-status.good{color:var(--van-2);font-weight:600}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* success panel */
.pr-done{display:none;background:#f0f7ec;border:1px solid #bcd9b0;border-left:5px solid var(--patta);padding:22px 24px;margin:1.4rem 0 0}
.pr-done h3{margin-bottom:.4em}
.pr-done .ref{font:600 1.05rem var(--f-body);color:var(--van-dk);background:#fff;border:1px dashed #bcd9b0;padding:6px 12px;display:inline-block}

/* setup warning, only shows while the API URL is blank */
.pr-setup{background:#fff6e6;border:1px dashed #e2b073;padding:14px 18px;font-size:.92rem;color:#6b4a1d;margin:1.4rem 0 0}

/* --- members ---------------------------------------------------------- */
.pr-mbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:2rem 0 0}
.pr-members{margin-top:22px}
.pr-privacy{font-size:.88rem;color:var(--dhundh);background:var(--dhoop-2);border-left:3px solid var(--kesari);
  padding:10px 14px;margin:0 0 18px}
.pr-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 14px;list-style:none;padding:0;margin:0}
.pr-people li{margin:0;text-align:center}
.pr-people .av{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block;
  border:3px solid var(--van);background:var(--dhoop-2);box-shadow:0 10px 22px -14px rgba(20,86,31,.8)}
.pr-people .av-initial{
  width:104px;height:104px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--van);background:var(--van);color:#fff;font:700 2rem var(--f-body);
  box-shadow:0 10px 22px -14px rgba(20,86,31,.8)
}
.pr-people .nm{font:600 .95rem/1.4 var(--f-body);color:var(--van-dk);word-break:break-word}
.pr-people .tp{font:400 .78rem var(--f-body);color:var(--dhundh);margin-top:2px}

/* path picker */
.pr-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 10px}
.pr-path{
  display:block;margin:0;cursor:pointer;border:1px solid var(--rekha);background:#fff;padding:14px 16px;
  font:600 .95rem/1.45 var(--f-body);color:var(--van-dk);
}
.pr-path input{position:absolute;opacity:0;pointer-events:none}
.pr-path em{display:block;font:400 .82rem var(--f-body);color:var(--dhundh);margin-top:4px;font-style:normal}
.pr-path:hover{border-color:var(--van)}
.pr-path.on{border-color:var(--kesari);background:#fff8f2;box-shadow:inset 0 0 0 1px var(--kesari)}
#err-path{display:block;color:#b3261e;font-size:.87rem;margin:0 0 12px}

/* checkbox groups */
.chk-label{display:block;font:600 .92rem/1.5 var(--f-body);color:var(--van-dk);margin-bottom:8px}
.chk-label em{font-weight:400;color:var(--dhundh);font-style:normal}
.pr-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:4px}
.pr-checks label{display:flex;gap:8px;align-items:flex-start;font:400 .92rem/1.4 var(--f-body);cursor:pointer;margin:0}
.pr-checks input[type=checkbox]{margin-top:3px;flex:none;accent-color:var(--van)}
.pr-checks .other-row{grid-column:1 / -1;align-items:center;flex-wrap:wrap}
.pr-checks .other-row input[type=text]{flex:1;min-width:160px;padding:6px 10px;border:1px solid #cfc7b4;font:400 .92rem var(--f-body)}
.inline-check{display:flex !important;gap:10px;align-items:flex-start;font:400 .94rem/1.5 var(--f-body) !important;cursor:pointer}
.inline-check input{margin-top:4px;flex:none;accent-color:var(--van)}

/* donation amounts + QR */
.pr-amounts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pr-amounts .amt{
  border:2px solid var(--van);color:var(--van);background:#fff;padding:10px 16px;
  font:600 .95rem var(--f-body);cursor:pointer
}
.pr-amounts .amt:hover{background:var(--dhoop-2)}
.pr-amounts .amt.pick{background:var(--van);color:#fff}
.pr-qr{border:1px solid var(--rekha);background:var(--dhoop-2);padding:16px;margin:0 0 14px;text-align:center}
.pr-qr img{max-width:220px;height:auto;display:block;margin:0 auto 10px;background:#fff;padding:8px;border:1px solid var(--rekha)}
.pr-qr-ph{padding:40px 16px;color:var(--dhundh);font-size:.9rem}
.pr-qr p{font-size:.9rem;color:var(--dhundh);margin:0}
.pr-bank{margin:14px 0 0;padding:14px 14px 10px;border:1px solid var(--rekha);background:#fff;text-align:left}
.pr-bank-title{margin:0 0 10px;font:700 .86rem var(--f-body);letter-spacing:.03em;text-transform:uppercase;color:var(--van)}
.pr-bank-dl{margin:0;display:grid;gap:6px}
.pr-bank-dl > div{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:baseline}
.pr-bank-dl dt{margin:0;font:600 .82rem var(--f-body);color:var(--dhundh)}
.pr-bank-dl dd{margin:0;font:600 .92rem/1.35 var(--f-body);color:var(--van-dk);word-break:break-word}

/* activity on member panel */
.pr-activity{margin:0 0 8px}
.pr-activity-label{margin:12px 0 8px;font:600 .9rem var(--f-body);color:var(--van-dk)}
.pr-activity-label:first-child{margin-top:0}
.pr-activity-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.pr-activity-list li{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  border:1px solid var(--rekha);background:#fff;padding:10px 12px
}
.pr-activity-list li strong{font:600 .95rem/1.35 var(--f-body);color:var(--van-dk)}
.pr-activity-list li .st{font:400 .82rem/1.35 var(--f-body);color:var(--dhundh);text-align:right;flex:none}
.pr-activity-list li.done{border-left:3px solid var(--van);background:var(--dhoop-2)}
.pr-activity-list li.open{border-left:3px solid #cfc7b4}
.pr-don-table{display:flex;flex-direction:column;gap:8px}
.pr-don-row{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  border:1px solid var(--rekha);background:#fff;padding:10px 12px
}
.pr-don-row strong{display:block;font:600 .95rem var(--f-body);color:var(--van-dk)}
.pr-don-row .meta{display:block;font:400 .8rem var(--f-body);color:var(--dhundh);margin-top:2px}
.pr-don-row .badge{flex:none;font:600 .75rem/1 var(--f-body);padding:6px 8px;border:1px solid var(--rekha);background:var(--dhoop-2);color:var(--van-dk)}
.pr-don-row .badge.pay-verified{background:#e8f5e9;border-color:#81c784;color:#1b5e20}
.pr-don-row .badge.pay-pending{background:#fff8e1;border-color:#ffcc80;color:#e65100}
.pr-don-row .badge.pay-rejected{background:#ffebee;border-color:#ef9a9a;color:#b71c1c}

/* DPDP */
.pr-dpdp{background:#fff;border:1px solid var(--rekha);padding:18px 20px;margin-bottom:8px}
.pr-dpdp h3{margin:0 0 10px;font-size:1.1rem;color:var(--van-dk)}
.pr-dpdp p{font-size:.92rem;color:var(--syahi);margin:0 0 10px}

@media (max-width:720px){
  .pr-paths,.pr-checks{grid-template-columns:1fr}
}
.pr-empty{color:var(--dhundh);font-size:.95rem}

/* --- edit dialog ------------------------------------------------------ */
.pr-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow:auto;background:rgba(15,40,20,.55)}
.pr-modal[hidden]{display:none}
.pr-box{background:var(--kagaz);border-top:5px solid var(--kesari);width:100%;max-width:640px;
  padding:26px 28px 24px;box-shadow:0 30px 70px -30px #000;margin:auto}
.pr-box h3{margin-bottom:.35em}
.pr-box .close{float:right;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--dhundh);cursor:pointer;padding:0 2px}
.pr-box .close:hover{color:var(--kesari-dk)}
.pr-step{display:none}
.pr-step.on{display:block}
.otp-in{letter-spacing:.5em;font-size:1.3rem !important;text-align:center;max-width:230px}
.pr-pick-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pr-pick-list li{margin:0}
.pr-pick-list button{
  width:100%;text-align:left;cursor:pointer;border:1px solid var(--rekha);background:#fff;
  padding:12px 14px;font:600 1rem var(--f-body);color:var(--van-dk);display:flex;gap:12px;align-items:center;
}
.pr-pick-list button:hover{border-color:var(--kesari);background:var(--dhoop-2)}
.pr-pick-list .av{width:48px;height:48px;object-fit:cover;border-radius:2px;flex:none;border:1px solid var(--rekha)}
.pr-pick-list .meta{display:block;font:400 .86rem var(--f-body);color:var(--dhundh);margin-top:2px}

/* member panel dashboard */
.pr-dash-note{font-size:.9rem;color:var(--dhundh);margin:0 0 14px;line-height:1.5}
.pr-dash-h{margin:16px 0 10px;font:700 .84rem var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--van)}
.pr-dash-done{font-size:.9rem;background:var(--dhoop-2);border-left:3px solid var(--van);padding:10px 14px;margin:0 0 8px;color:var(--syahi)}
.pr-dash-paths{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.pr-dash-paths button{
  width:100%;text-align:left;cursor:pointer;border:1px solid var(--rekha);background:#fff;
  padding:14px 16px;font:600 .98rem/1.4 var(--f-body);color:var(--van-dk)
}
.pr-dash-paths button:hover{border-color:var(--kesari);background:#fff8f2}
.pr-dash-paths button em{display:block;font:400 .82rem var(--f-body);color:var(--dhundh);margin-top:4px;font-style:normal}
.pr-dash-paths .locked{opacity:.55;cursor:not-allowed;border-style:dashed}
.pr-dash-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;align-items:center}
.pr-path[hidden]{display:none !important}

/* full-page member panel */
.pr-panel-page .pr-panel-step{display:none}
.pr-panel-page .pr-panel-step.on{display:block}
.pr-panel-page h2{margin:0 0 .5em;font-size:1.25rem;color:var(--van-dk)}
.pr-dash-user{display:flex;gap:14px;align-items:center;margin:0 0 16px;padding:12px 14px;background:var(--dhoop-2);border:1px solid var(--rekha)}
.pr-dash-user .av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--van);flex:none}
.pr-dash-user strong{display:block;font:600 1.05rem var(--f-body);color:var(--van-dk)}
.pr-dash-user .meta{display:block;font:400 .86rem var(--f-body);color:var(--dhundh);margin-top:4px}

@media (max-width:720px){
  .pr-form{padding:20px 16px}
  .pr-grid{grid-template-columns:1fr}
  .drop{flex-direction:column;align-items:flex-start}
  .pr-people{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .pr-people .av{width:84px;height:84px}
  .pr-box{padding:20px 18px}
}
