.id-card {
  --id-background: #d3f0eb;
  --id-accent: #009b8e;
  --id-decoration: rgba(0,155,142,.18);
  --id-edge: #7fd2c4;
  background: var(--id-background);
  color: #172b2a; border-radius: 16px; padding: 1.5rem 1.6rem;
  position: relative; overflow: hidden; margin-bottom: 1.25rem;
}
.id-card-gold {
  --id-background: #fff5d6;
  --id-accent: #d69a22;
  --id-decoration: rgba(214,154,34,.20);
  --id-edge: #efce6c;
}
.id-card::before {
  content: ''; position: absolute; bottom: 14px; right: -18px;
  width: 250px; height: 142px; pointer-events: none;
  /* BMR lotus watermark (transparent PNG), sitting behind the footer. */
  background: url("../../images/membership/lotus-watermark.png") no-repeat right bottom / contain;
}
.id-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 12px; background: var(--id-edge);
  clip-path: polygon(0 72%, 30% 0, 70% 40%, 100% 15%, 100% 100%, 0 100%);
}
.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 { position:relative; z-index:1; display: flex; align-items: flex-start; gap: 1rem; margin-top: .75rem; }
.id-avatar {
  width: 80px; height: 80px; border-radius: 10px;
  object-fit: cover; border: 2px solid var(--id-accent); flex-shrink: 0;
}
.id-body-right { flex: 1; min-width: 0; }
.id-info { margin-bottom: .6rem; }
.id-info .id-name { font-size: 1.1rem; font-weight: 800; }
.id-info .id-type { display:inline-block; font-size:.75rem; font-weight:700; color:#fff; background:var(--id-accent); border-radius:20px; padding:.3rem .75rem; margin-top:.35rem; }
.id-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; position:relative; z-index:1; margin-bottom:.5rem; }
.id-logo { width:48px; height:48px; border-radius:50%; border:1.5px solid var(--id-accent); object-fit:contain; background:#fff; padding:.25rem; flex-shrink:0; }
.id-fields { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.5rem .85rem; 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;  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; }

.id-footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid var(--id-decoration);
}
.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: 0;
  background: var(--id-accent); color: #fff; border-radius: 20px; padding: .2rem .75rem;
}


.id-qr-row { display:flex; align-items:center; gap:1rem; margin-top:1rem; position:relative; z-index:1; }
.id-qr { flex-shrink:0; padding:8px; border-radius:8px; background:#fff; color:#172b2a; }
.id-qr img { display:none !important; }
.id-qr canvas { display:block !important; width:112px; height:112px; }
.id-qr-note { margin:0; max-width:240px; font-size:.76rem; line-height:1.5; color:#435b59; }


/* Compact card layout shared by the member dashboard and management preview. */
.id-card {
  width:100%; max-width:680px; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0,1fr) 136px; gap:20px 24px;
  padding:24px; border:1px solid var(--id-decoration); border-radius:20px;
  box-shadow:0 8px 24px rgba(23,43,42,.07); margin-bottom:14px;
}
.id-card-top { grid-column:1 / -1; align-items:center; gap:12px; margin:0; }
.id-card-heading { flex:1; min-width:0; }
.id-card-org { font-size:.62rem; letter-spacing:.08em; line-height:1.5; margin-bottom:3px; }
.id-card-title { font-size:1rem; margin:0; line-height:1.3; }
.id-logo { width:46px; height:46px; }
.id-type, .id-info .id-type {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--id-accent); color:#fff; border-radius:20px;
  padding:7px 12px; font-size:.7rem; font-weight:700; line-height:1.3; margin:0;
}
.id-card-body { grid-column:1; align-items:flex-start; margin:0; gap:14px; }
.id-avatar { width:60px; height:68px; border-radius:12px; }
.id-info { margin-bottom:14px; }
.id-name { font-size:1.1rem; line-height:1.4; font-weight:800; overflow-wrap:anywhere; }
.id-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.id-field-label { font-size:.59rem; line-height:1.4; margin-bottom:3px; }
.id-field-value { font-size:.86rem; line-height:1.4; }
.id-qr-row { grid-column:2; grid-row:2; flex-direction:column; align-items:center; gap:8px; margin:0; align-self:start; }
.id-qr { padding:10px; border-radius:12px; box-shadow:0 3px 10px rgba(23,43,42,.06); }
.id-qr-note { text-align:center; font-size:.64rem; line-height:1.5; max-width:136px; }
.id-card-note { grid-column:1 / -1; margin:0; font-size:.68rem; line-height:1.5; }
.id-signature { grid-column:1 / -1; margin:0; }
.id-footer { grid-column:1 / -1; position:relative; z-index:1; margin:0; padding-top:12px; align-items:center; gap:12px; }
.id-footer .id-ref { font-size:.65rem; }
.id-footer .id-badge { font-size:.65rem; padding:4px 10px; }
.id-card::before { width:230px; height:130px; opacity:.55; }
.id-card-actions { display:flex; gap:10px; width:100%; max-width:680px; margin-bottom:20px; }
.id-card-actions .btn { min-height:44px; border-radius:12px; font-size:.85rem; font-weight:600; }
.id-card-feedback { max-width:680px; }
/* Tap-to-enlarge QR (member dashboard). */
.id-qr-button { padding:0; border:0; background:none; border-radius:12px; cursor:zoom-in; transition:transform .15s; }
.id-qr-button:hover { transform:scale(1.03); }
.id-qr-button:focus-visible { outline:2px solid var(--id-accent); outline-offset:3px; }
.id-qr-hint { display:block; font-weight:700; color:var(--id-accent); }

/* Card actions in the footer (member dashboard only; excluded from the downloaded image). */
.id-footer-end { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.id-actions { display:flex; gap:4px; }
.id-action {
  width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--id-decoration);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.75); color:var(--id-accent); font-size:.74rem; transition:background .15s, color .15s;
}
.id-action:hover:not(:disabled) { background:var(--id-accent); color:#fff; }
.id-action:focus-visible { outline:2px solid var(--id-accent); outline-offset:2px; }
.id-action:disabled { opacity:.6; cursor:wait; }
/* Keep Myanmar clusters together when html2canvas draws the applied-date badge. */
html.lang-my .id-footer .id-badge {
  font-family: 'Noto Sans Myanmar', sans-serif;
  letter-spacing: 0;
  line-height: 1.8;
}

/* Scale the complete desktop card instead of rearranging its contents. */
.id-card-frame { width:100%; max-width:680px; min-width:0; margin-bottom:14px; }
.id-card-frame > .id-card { width:680px; max-width:none; margin-bottom:0; transform-origin:top left; }