.ngo-frontend{max-width:740px;margin:20px auto;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;}
.ngo-frontend h2{margin-top:0;}
.ngo-form input,.ngo-form textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:10px;}
.ngo-form button{padding:10px 14px;border:0;border-radius:10px;background:#111827;color:#fff;cursor:pointer;}
.ngo-msg{padding:10px;border-radius:10px;margin-bottom:10px;}
.ngo-ok{background:#ecfdf5;border:1px solid #a7f3d0;}
.ngo-err{background:#fef2f2;border:1px solid #fecaca;}
.ngo-note{color:#6b7280;}
.ngo-pre{background:#f6f7f7;padding:12px;border-radius:10px;white-space:pre-wrap;}
.ngo-box{background:#f9fafb;padding:12px;border-radius:12px;border:1px solid #e5e7eb;}
.ngo-docs{padding-left:18px;}
.ngo-small{font-size:12px;color:#6b7280;}
.ngo-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.ngo-card-box{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff;}

/* Registration form: match backend "Add Member (Manual)" layout */
.ngo-register-head{margin-bottom:12px;}
.ngo-register-head h2{margin:0 0 6px;}
.ngo-register-sub{margin:0 0 10px;}
.ngo-register-org{font-weight:800;text-transform:uppercase;}
.ngo-register-tag{color:#374151;font-size:13px;}

.ngo-register-form .ngo-form-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;}
.ngo-register-form .ngo-form-grid .full{grid-column:1 / -1;}
.ngo-register-form .ngo-form-grid label{font-weight:700;display:block;margin-bottom:6px;font-size:13px;}
.ngo-register-form .ngo-form-grid input[type="text"],
.ngo-register-form .ngo-form-grid input[type="email"],
.ngo-register-form .ngo-form-grid input[type="date"],
.ngo-register-form .ngo-form-grid textarea,
.ngo-register-form .ngo-form-grid select{width:100%;max-width:100%;}

/* Volunteer ID split (prefix + digits) */
.ngo-register-form .ngo-id-split{display:flex;gap:8px;align-items:center;}
.ngo-register-form .ngo-id-prefix{width:120px;max-width:45%;background:#f6f7f7;}

/* Photo field (frontend version of backend UI) */
.ngo-register-form .ngo-media-field{border:1px dashed #cbd5e1;border-radius:12px;padding:12px;background:#fff;}
.ngo-register-form .ngo-media-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ngo-register-form .ngo-media-actions .ngo-file-select,
.ngo-register-form .ngo-media-actions .ngo-file-remove{padding:8px 12px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111;cursor:pointer;font-weight:700;}
.ngo-register-form .ngo-media-preview img{display:block;max-width:180px;margin-top:10px;border:1px solid #e5e7eb;border-radius:10px;}
.ngo-register-actions{margin-top:14px;display:flex;justify-content:flex-end;}
.ngo-register-actions button{background:#166534;}

@media (max-width: 720px){
  .ngo-register-form .ngo-form-grid{grid-template-columns:1fr;}
}


/* Membership form (simple replica of attached format) */
.ngo-membership-form .ngo-mf{
  border:2px solid #111;
  padding:16px;
  border-radius:10px;
  background:#fff;
}
.ngo-mf-head{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:16px;
  row-gap:8px;
  align-items:start;
  border-bottom:2px solid #111;
  padding-bottom:12px;
  margin-bottom:12px;
}
.ngo-mf-org{grid-column:1; grid-row:1; font-weight:800; font-size:22px; line-height:1.2; text-transform:uppercase;}
.ngo-mf-head-right{grid-column:2; grid-row:1; display:flex; gap:10px; align-items:flex-start;}
.ngo-mf-tag{grid-column:1 / -1; grid-row:2; font-size:13px; color:#333;}
.ngo-mf-meta{min-width:220px; border:1px solid #111; border-radius:8px; padding:10px; font-size:12px;}
.ngo-mf-meta-row{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px dashed #999;}
.ngo-mf-meta-row:last-child{border-bottom:0;}
.ngo-mf-label{color:#111; font-weight:600;}
.ngo-mf-value{color:#111; white-space:nowrap;}
.ngo-mf-photo-box{
  width:150px;
  border:1px solid #111;
  border-radius:8px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ngo-mf-photo-label{font-weight:700; font-size:12px; text-align:center;}
.ngo-mf-photo-box input{font-size:12px;}
.ngo-mf-section{display:flex; flex-direction:column; gap:10px;}

.ngo-mf-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ngo-mf-field label{display:block; font-weight:700; font-size:13px; margin-bottom:6px;}
.ngo-mf-field input, .ngo-mf-field textarea, .ngo-mf-field select{
  width:100%;
  border:1px solid #111;
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
}

/* Make selects look like selects even when themes try to get fancy */
.ngo-mf-field select{
  appearance:auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  background-color:#fff;
}

/* Volunteer ID split inputs */
.ngo-mf-id-split{display:flex; align-items:center; gap:6px;}
.ngo-mf-id-prefix{width:90px; min-width:90px; background:#f3f4f6;}
.ngo-mf-id-input{width:90px; min-width:90px;}
.ngo-mf-full{grid-column:1 / -1;}
/* Photo upload frame */
.ngo-upload-frame{
  width:100%;
  height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px dashed #666;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  gap:6px;
}
.ngo-upload-frame input{display:none;}
.ngo-upload-icon{font-size:22px; line-height:1;}
.ngo-upload-text{font-size:12px; font-weight:800;}
.ngo-mf-row label{display:block; font-weight:700; font-size:13px; margin-bottom:6px;}
.ngo-mf-row input, .ngo-mf-row textarea, .ngo-mf-row select{
  width:100%;
  border:1px solid #111;
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
}
.ngo-mf-2col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ngo-mf-actions{margin-top:14px; display:flex; justify-content:flex-end;}
.ngo-mf-actions button{
  background:#111;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}
@media (max-width: 720px){
  .ngo-mf-head{grid-template-columns:1fr;}
  .ngo-mf-head-right{grid-column:1; grid-row:2;}
  .ngo-mf-tag{grid-row:3;}
  .ngo-mf-2col{grid-template-columns:1fr;}
}

/* Verify modal */
.ngo-btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #111; background:#fff; cursor:pointer; font-weight:700;}
.ngo-btn-primary{background:#111; color:#fff; border-color:#111;}
.ngo-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:99999; padding:20px;}
.ngo-modal.is-open{display:flex;}
.ngo-modal-dialog{background:#fff; border-radius:14px; width:min(520px, 96vw); overflow:hidden; border:1px solid #111;}
.ngo-modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #ddd;}
.ngo-modal-x{font-size:22px; text-decoration:none; color:#111; line-height:1;}
.ngo-modal-body{padding:14px;}
.ngo-verify-wrap form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
.ngo-verify-wrap label{display:block; font-weight:700; margin-bottom:6px;}
.ngo-verify-wrap input{flex:1; min-width:200px; border:1px solid #111; border-radius:10px; padding:10px 12px;}
.ngo-verify-result{margin-top:12px;}

/* Member list */
.ngo-ml-controls{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px;}
.ngo-ml-controls input, .ngo-ml-controls select{border:1px solid #111; border-radius:10px; padding:10px 12px;}
.ngo-ml-tablewrap{overflow:auto; border:1px solid #ddd; border-radius:12px;}
.ngo-table{width:100%; border-collapse:collapse; min-width:520px;}
.ngo-table th, .ngo-table td{padding:10px 12px; border-bottom:1px solid #eee; text-align:left;}
.ngo-pill{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #ddd;}
.ngo-pill-verified{border-color:#16a34a; color:#16a34a;}
.ngo-pill-pending{border-color:#f59e0b; color:#b45309;}

/* Inline Member ID verification (no popup) */
.ngo-verify-inline{
  max-width: 640px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}
.ngo-verify-title{margin-bottom: 10px; font-size: 16px;}
.ngo-verify-inline form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
.ngo-verify-inline label{display:block; width:100%; font-weight:700; font-size:13px; margin-bottom:6px;}
.ngo-verify-inline input{
  flex: 1 1 280px;
  border:1px solid #111;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}
.ngo-verify-inline button{white-space:nowrap;}
.ngo-verify-inline .ngo-verify-result{margin-top:12px;}



/* Manual ID input split (prefix + digits) */
.ngo-mf-id-split{
  display:flex;
  gap:8px;
  align-items:center;
}
.ngo-mf-id-prefix{
  width: 120px;
  max-width: 45%;
  padding: 6px 10px;
  border: 1px solid #cfd7df;
  border-radius: 6px;
  background: #f7fafc;
  color: #111;
  font-size: 14px;
}
.ngo-mf-id-split .ngo-mf-id-input{
  width: 130px;
}
/* Manual ID input in header */
.ngo-mf-id-input{
  width: 220px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid #cfd7df;
  border-radius: 6px;
  font-size: 14px;
}

/* Note box */
.ngo-note{
  padding: 10px 12px;
  border: 1px dashed #cfd7df;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* Relation field (prefix + name) */
.ngo-rel-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.ngo-rel-row select{
  width:140px;
  min-width:140px;
}
.ngo-rel-row input{
  flex:1;
}

/* Force compact relation select + full width name input (theme-safe override) */
.ngo-register-form .ngo-form-grid .ngo-rel-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;}
.ngo-register-form .ngo-form-grid .ngo-rel-row select{
  width:100px !important;
  max-width:100px !important;
  min-width:100px !important;
  flex:0 0 100px !important;
}
.ngo-register-form .ngo-form-grid .ngo-rel-row input{
  width:auto !important;
  max-width:none !important;
  flex:1 1 auto !important;
  min-width:180px;
}
@media (max-width:520px){
  .ngo-register-form .ngo-form-grid .ngo-rel-row{flex-wrap:wrap;}
  .ngo-register-form .ngo-form-grid .ngo-rel-row input{
    min-width:100% !important;
    flex:0 0 100% !important;
  }
}