/* ============================================================
   certificate.css — Certificate modal (form + canvas preview)
   The certificate itself is deliberately NOT styled like the
   rest of this dark neon app — it's drawn to look like a real,
   printable paper certificate (see certificate.js), since it's
   meant to be attached to job applications and freelance
   profiles. This file only styles the surrounding modal chrome,
   which stays consistent with the rest of the site.
   ============================================================ */

.certificate-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 4, 10, 0.82);
  backdrop-filter: blur(6px);
}

.certificate-modal__panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.certificate-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-md);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.certificate-modal__close:hover,
.certificate-modal__close:focus-visible {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.certificate-modal__form h3 {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.certificate-modal__form p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

#certificate-name-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

#certificate-name-input:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 1px;
}

.certificate-modal__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

#certificate-canvas {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.certificate-modal__actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.certificate-modal__actions button {
  flex: 1;
}

.certificate-eligibility-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

@media (max-width: 480px) {
  .certificate-modal__panel {
    padding: var(--space-4);
  }
  .certificate-modal__actions {
    flex-direction: column;
  }
}