/*--------------------------------------------------------------
# QR Code Generator page
# Reuses the shared primitives in style.css:
#   .calc-card / .calc-field / .input-unit-wrap / .search-button /
#   .reset-button / .result-unit-toggle / .unit-tab / .calc-error /
#   .presets-panel / .presets-header / .presets-title / .file-count /
#   .action-row / .option-rows / .option-row
--------------------------------------------------------------*/
.qr-section { padding: 60px 0; }

/* ── Form ──────────────────────────────────────────────────────────── */
.qr-fields {
  margin-top: 18px;
  margin-bottom: 18px;
}
.qr-fields[hidden] { display: none; }

/* Textarea inside .input-unit-wrap — match the input styling */
.input-unit-wrap textarea {
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 15px;
  width: 100%;
  color: #45505b;
  background: transparent;
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
}
.input-unit-wrap textarea::placeholder {
  color: #adb5bd;
  font-size: 13px;
}

/* Native <select> styled to match .input-unit-wrap inputs */
.qr-select {
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 15px;
  width: 100%;
  color: #45505b;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%236c757d'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
}

/* Style options block — kill the bottom border the citation pattern adds */
.qr-style-options {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 18px;
}
.qr-style-options .option-row .result-unit-toggle {
  flex: 1;
}
.qr-style-options .option-row .result-unit-toggle .unit-tab {
  flex: 1;
  text-align: center;
}

/* ── Result card ───────────────────────────────────────────────────── */
.qr-result-card { margin-top: 24px; }
.qr-result-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qr-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qr-actions-inline .preset-load-btn {
  white-space: nowrap;
}

/* QR canvas/SVG wrapper — checkered transparent background so the
   white QR squares are visible even on white pages */
.qr-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    repeating-conic-gradient(#f1f4f8 0 25%, #fff 0 50%) 0 0 / 24px 24px,
    #fff;
  border: 1px solid #e4eaf1;
  border-radius: 8px;
  max-width: 100%;
  overflow: auto;
}
.qr-canvas-wrap img,
.qr-canvas-wrap svg,
.qr-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  /* Force pixel-art rendering so PNG QR codes don't blur on small sizes */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.qr-result-payload {
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  color: #6c757d;
  background: #f8fafd;
  border: 1px solid #e4eaf1;
  border-radius: 6px;
  padding: 8px 12px;
  max-width: 100%;
  word-break: break-all;
  text-align: center;
}

/* Quick "copied" flash for the Copy button */
.preset-load-btn.copied {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .qr-result-body { padding: 22px 16px; }

  /* Stack the inline action buttons under the title on narrow screens
     so they don't crowd. */
  .qr-result-card .presets-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .qr-actions-inline { width: 100%; justify-content: stretch; }
  .qr-actions-inline .preset-load-btn { flex: 1; justify-content: center; }

  .option-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qr-style-options .option-row-label { min-width: 0; }
  .qr-style-options .option-row .result-unit-toggle {
    display: flex;
    width: 100%;
  }
  .qr-style-options .option-row .result-unit-toggle .unit-tab {
    padding: 7px 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .qr-canvas-wrap { padding: 10px; }
}