[x-cloak] { display: none !important; }

/* ── Section card ── */
.mem-card {
  background: #fff; border-radius: 14px; border: 1px solid var(--bmr-border);
  overflow: hidden; margin-bottom: 1.25rem;
}
.mem-card-header {
  padding: .9rem 1.4rem; border-bottom: 1px solid var(--bmr-border);
  display: flex; align-items: center; gap: .6rem;
}
.mem-card-header h5 {
  font-size: .95rem; font-weight: 700; margin: 0; color: #1a1a1a;
}
.mem-card-header .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bmr-teal-light); color: var(--bmr-teal);
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
  flex-shrink: 0;
}
.mem-card-body { padding: 1.4rem; }

/* ── Status banner ── */
.status-banner {
  border-radius: 14px; padding: 1.4rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.sb-left { display: flex; align-items: center; gap: 1rem; }
.sb-icon { font-size: 2.2rem; line-height: 1; }
.sb-title { font-size: 1.15rem; font-weight: 800; color: inherit; margin-bottom: .2rem; }
.sb-sub { font-size: .83rem; opacity: .85; }
.sb-ref { text-align: right; }
.sb-ref .label { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.sb-ref .value { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; }
.sb-ref .date { font-size: .78rem; opacity: .75; margin-top: .1rem; }

/* Status colour sets */
.sb-draft      { background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb; }
.sb-pending    { background: #fffbeb; color: #92400e; border: 1.5px solid #fde68a; }
.sb-revise     { background: #fff1f2; color: #9f1239; border: 1.5px solid #fecdd3; }
.sb-payment    { background: #f5f3ff; color: #4c1d95; border: 1.5px solid #ddd6fe; }
.sb-reviewing  { background: #f0f9ff; color: #0c4a6e; border: 1.5px solid #bae6fd; }
.sb-active     { background: var(--bmr-teal-light); color: var(--bmr-teal); border: 1.5px solid var(--bmr-teal-mid); }
.sb-rejected   { background: #fff1f2; color: #9f1239; border: 1.5px solid #fecdd3; }
.sb-terminated { background: #f3f4f6; color: #374151; border: 1.5px solid #e5e7eb; }

/* ── Info grid ── */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 2rem; }
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }
.info-item .il { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: .2rem; }
.info-item .iv { font-size: .91rem; font-weight: 600; color: #222; }
.info-item .iv.empty { color: #bbb; font-weight: 400; font-style: italic; }
.sensitive-value {
  display: inline-flex; align-items: center; gap: .45rem; min-width: 0;
  max-width: 100%;
}
.sensitive-value span { overflow-wrap: anywhere; min-width: 0; }
.sensitive-toggle {
  border: 0; background: transparent; color: var(--bmr-teal);
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.sensitive-toggle:hover { background: var(--bmr-teal-light); }
.id-card .sensitive-toggle { color: #fff; }
.id-card .sensitive-toggle:hover { background: rgba(255,255,255,.14); }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ''; position: absolute; left: .55rem; top: .4rem; bottom: .4rem;
  width: 2px; background: #e5e7eb;
}
.tl-item { position: relative; margin-bottom: 1.1rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: -1.6rem; top: .25rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bmr-teal); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--bmr-teal-mid);
}
.tl-dot.inactive { background: #d1d5db; box-shadow: 0 0 0 2px #e5e7eb; }
.tl-label { font-size: .83rem; font-weight: 700; color: #333; }
.tl-meta  { font-size: .76rem; color: #888; margin-top: .1rem; }

/* ── Membership ID card ── */
.id-card {
  background: linear-gradient(135deg, #1b6055 0%, #0e3d35 100%);
  color: #fff; border-radius: 16px; padding: 1.5rem 1.6rem;
  position: relative; overflow: hidden; margin-bottom: 1.25rem;
}
.id-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.id-card::after {
  content: ''; position: absolute; bottom: -50px; left: 60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.id-card-org { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: .2rem; }
.id-card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: .8rem; }
.id-card-body { display: flex; align-items: center; gap: 1rem; }
.id-avatar {
  width: 68px; height: 68px; border-radius: 10px;
  object-fit: cover; border: 2px solid rgba(255,255,255,.4); flex-shrink: 0;
}
.id-info .id-name { font-size: 1.1rem; font-weight: 800; }
.id-info .id-type { font-size: .8rem; opacity: .8; margin-top: .1rem; }
.id-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; position:relative; z-index:1; }
.id-logo { width:54px; height:54px; border-radius:8px; object-fit:contain; background:rgba(255,255,255,.92); padding:.25rem; flex-shrink:0; }
.id-fields { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.65rem 1rem; margin-top:1rem; position:relative; z-index:1; }
.id-field-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; opacity:.68; font-weight:700; }
.id-field-value { font-size:.92rem; font-weight:800; overflow-wrap:anywhere; }
.id-card-note { font-size:.73rem; opacity:.76; margin-top:.9rem; position:relative; z-index:1; }
.id-signature { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-top:1rem; position:relative; z-index:1; }
.id-signature img { max-width:112px; max-height:44px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
.id-signature-name { font-size:.72rem; font-weight:800; }
.id-signature-title { font-size:.66rem; opacity:.7; }
.id-contact-lines { font-size:.68rem; opacity:.72; text-align:right; }
@media (max-width: 640px) { .id-fields { grid-template-columns:1fr; } .id-card-top, .id-signature { flex-direction:column; } .id-contact-lines { text-align:left; } }
.id-footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.id-footer .id-ref { font-size: .75rem; opacity: .7; font-family: monospace; letter-spacing: .06em; }
.id-footer .id-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.2); border-radius: 20px; padding: .2rem .75rem;
}

/* ── Payment badge ── */
.pay-status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 20px; padding: .28rem .85rem;
  font-size: .78rem; font-weight: 700;
}
.psp-pending  { background: #fef9c3; color: #854d0e; }
.psp-submitted { background: #dbeafe; color: #1e40af; }
.psp-paid     { background: #dcfce7; color: #166534; }
.psp-verified { background: #d1fae5; color: #065f46; }
.psp-rejected { background: #fee2e2; color: #991b1b; }

/* ── Action strip ── */
.action-strip {
  background: #fff; border-radius: 14px; border: 1px solid var(--bmr-border);
  padding: 1rem 1.4rem; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.action-strip p { margin: 0; font-size: .88rem; color: #555; }