/* QR generator page (/qr-code-generator/) — hc-50k */

.qr-preview {
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
}

.qr-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Upsell band (the site's brand teal; Bootstrap has no bg-teal utility) */
.bg-teal {
  background: var(--handy-teal);
}

/* Print: only the generated code, full-page. generator.js clones the SVG
   into .qr-print-area before calling window.print(). */
.qr-print-area {
  display: none;
}

.qr-print-area svg {
  width: 420px;
  height: 420px;
}

@media print {
  body * {
    visibility: hidden;
  }

  .qr-print-area,
  .qr-print-area * {
    visibility: visible;
  }

  .qr-print-area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
}