/* ===== Viewcard Modal (popup) ===== */
.viewcard-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* จะถูกเปิดด้วย JS -> display:flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);   /* ฉากมืด */
  z-index: 3000;                 /* สูงกว่า header ที่ z=1000 */
  padding: 16px;
}
.viewcard-modal[aria-hidden="true"]{ display:none; }

.viewcard-wrap{
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 16px;
  background: #12131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.viewcard-content{
  position: relative;
  padding: 16px;
}

.viewcard-close{
  position: absolute;
  right: 12px; top: 8px;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  color: #fff; opacity: .85;
}
.viewcard-close:hover{ opacity: 1; }

.viewcard-field{
  margin: 10px 0 12px;
}
.viewcard-field label{
  display: block;
  font-weight: 800;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

/* กล่อง input + ปุ่ม copy */
.viewcard-copygroup{
  display: flex;
  gap: 8px;
}
.viewcard-copygroup input{
  flex: 1;
  background: #0f1118;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.viewcard-copygroup button{
  background: #0ea5ff;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}
.viewcard-copygroup button:hover{
  filter: brightness(1.06);
}

/* ปุ่มปิดด้านล่าง */
.viewcard-btn-close{
  width: 100%;
  margin-top: 8px;
  background: #22263a;
  color: #e9ecff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.viewcard-btn-close:hover{ filter: brightness(1.06); }

/* เล็กลงบนมือถือ */
@media (max-width: 600px){
  .viewcard-content{ padding: 14px; }
  .viewcard-copygroup{ flex-direction: column; }
  .viewcard-copygroup button{ width: 100%; }
}