/* ============================================================
   JOIN PAGE LAYOUT (form + eligibility list)
   ============================================================ */
.join-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:60px 0 90px; align-items:start; }
.join-form label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px; }
.join-form input, .join-form select{
  width:100%; padding:13px 14px; border:1px solid var(--paper-line); background:var(--parchment);
  font-family:var(--font-body); font-size:15px; color:var(--ink);
}
.join-form input:focus, .join-form select:focus{ border-color:var(--seal); }
.join-form button{ margin-top:26px; width:100%; justify-content:center; padding:15px; font-size:13px; }
.form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; }
.eligibility{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:10px; }
.eligibility li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft); }
.eligibility li::before{ content:'✓'; color:var(--success); font-weight:700; }

.photo-upload{ display:flex; align-items:center; gap:16px; padding:14px; border:1px dashed var(--paper-line); }
.photo-preview{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--parchment-2); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--paper-line);
}
.photo-preview img{ width:100%; height:100%; object-fit:cover; }

#cardResult{ text-align:center; }
#cardResult > .btn{ margin-top:22px; }

/* ============================================================
   ID CARD — professional membership card component
   Layout: dark sidebar (brand/tagline) + parchment main panel
   (photo, credentials, QR, seal). Designed to be captured 1:1
   by html2canvas for a crisp PNG export.
   ============================================================ */
.id-card{
  width:100%; max-width:620px; margin:0 auto;
  display:flex;
  background:var(--parchment);
  border:1px solid var(--ink);
  box-shadow:0 20px 40px rgba(0,0,0,.18);
  font-family:var(--font-body);
  color:var(--ink);
  overflow:hidden;
}

.id-sidebar{
  width:96px; flex-shrink:0;
  background:var(--ink);
  color:var(--parchment);
  display:flex; flex-direction:column; align-items:center;
  padding:20px 0;
  gap:18px;
  overflow:hidden;
}
.id-sidebar-logo{ width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 2px var(--parchment); }
.id-sidebar-tag{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  text-align:center; color:var(--brass-soft); line-height:2;
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  flex:1;
}

.id-main{ flex:1; padding:18px 22px 16px; position:relative; }

.id-topline{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
.id-proud{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--ink-soft);
  line-height:1.4;
}
.id-brandmark{ width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--seal); }
.id-brandmark img{ width:100%; height:100%; object-fit:cover; }
.id-status-chip{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-align:right;
  color:var(--seal); border:1px solid var(--seal); padding:3px 6px; line-height:1.4;
}

.id-title{ font-size:22px; letter-spacing:.01em; margin-top:6px; }
.id-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--brass); margin:2px 0 14px; }

.id-body{ display:flex; gap:16px; }
.id-photo{
  width:88px; height:104px; flex-shrink:0;
  background:var(--parchment-2); border:1px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  overflow:hidden;
}
.id-photo img{ width:100%; height:100%; object-fit:cover; }

.id-fields{ flex:1; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.id-field{ display:flex; align-items:flex-start; gap:8px; }
.id-icon{ color:var(--seal); margin-top:2px; flex-shrink:0; }
.id-field label{ display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; color:var(--brass); }
.id-field b{ display:block; font-size:13.5px; font-weight:600; line-height:1.3; }

.id-bottom{
  display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--paper-line);
}
.id-bottom-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; color:var(--ink-soft); line-height:1.4; flex:1; min-width:0; }
.id-seal{
  margin-left:auto; flex-shrink:0; width:50px; height:50px; border-radius:50%;
  border:2px solid var(--seal); color:var(--seal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:7px; font-weight:700; letter-spacing:.03em;
  transform:rotate(-10deg);
}

.id-footer-strip{
  margin-top:12px; margin-left:-22px; margin-right:-22px; margin-bottom:-16px;
  background:var(--ink); color:var(--parchment);
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em;
  display:flex; justify-content:space-between; padding:8px 22px;
}

@media (max-width:860px){
  .join-wrap{ grid-template-columns:1fr; }
  .id-card{ max-width:100%; }
}