/* Social share + QR modal */
.qr-modal-overlay,
.social-share-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--design-space-lg) !important;
  background: rgba(8, 7, 6, 0.72) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms var(--design-ease), visibility 180ms var(--design-ease) !important;
}

.qr-modal-overlay.show,
.social-share-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.qr-modal-card,
.social-share-popup {
  position: relative !important;
  width: min(420px, 100%) !important;
  padding: var(--design-space-xl) !important;
  background: #252320 !important;
  color: #faf9f5 !important;
  border: 1px solid rgba(250, 249, 245, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 64px rgba(20, 20, 19, 0.18), 0 0 0 1px rgba(250, 249, 245, 0.06) !important;
  transform: translateY(12px) scale(0.98) !important;
  opacity: 1 !important;
  transition: transform 180ms var(--design-ease), opacity 180ms var(--design-ease) !important;
}

.qr-modal-overlay.show .qr-modal-card,
.social-share-overlay.show .social-share-popup {
  transform: translateY(0) scale(1) !important;
}

.qr-modal-close,
.social-popup-close {
  position: absolute !important;
  top: var(--design-space-md) !important;
  right: var(--design-space-md) !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(250, 249, 245, 0.10) !important;
  border-radius: 50% !important;
  background: #1f1e1b !important;
  color: #faf9f5 !important;
}

.qr-modal-logo,
.social-popup-logo-ring {
  width: 70px !important;
  height: 70px !important;
  margin: 0 auto var(--design-space-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--design-radius-lg) !important;
  background: var(--design-surface-card) !important;
  color: var(--design-primary) !important;
}

.social-popup-logo {
  width: 54px !important;
  height: 54px !important;
  overflow: hidden !important;
  border-radius: var(--design-radius-md) !important;
}

.social-popup-logo img,
.qr-modal-img img,
.social-popup-qr img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.qr-modal-name,
.social-popup-name {
  margin: 0 0 var(--design-space-xs) !important;
  text-align: center !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
}

.social-popup-link {
  margin: 0 auto var(--design-space-md) !important;
  max-width: 100% !important;
  color: var(--design-muted) !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.qr-modal-img,
.social-popup-qr {
  width: min(220px, 70vw) !important;
  aspect-ratio: 1 !important;
  margin: var(--design-space-md) auto !important;
  padding: var(--design-space-sm) !important;
  background: var(--design-canvas) !important;
  border: 1px solid var(--design-hairline) !important;
  border-radius: var(--design-radius-lg) !important;
}

.qr-modal-actions,
.social-popup-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--design-space-sm) !important;
  margin-top: var(--design-space-lg) !important;
}

@media (max-width: 420px) {
  .qr-modal-actions,
  .social-popup-actions {
    grid-template-columns: 1fr !important;
  }
}