/* ==========================================================================
   code-generators.css: /qr-code-generator/ and /barcode-generator/
   (new pages, 2026-10-23)
   --------------------------------------------------------------------------
   Linked from those two pages only, like the order form's own stylesheet,
   so the sitewide stylesheet (and its ?rnd= in header-responsive.php) is
   untouched. Bump ?rnd= on the <link> in both pages after editing.

   The form fields reuse section 44 of the sitewide sheet (the prompt
   builder): the tool's root carries class "pb", which gives every label,
   text box, select and colour picker the same look. The page panels around
   the tool are the section 38 guide kit. This file is only what neither
   has: the type tabs, the accordion panels, the shape tiles, the sliders,
   the preview and the download buttons. Prefix .cg- (code generator).

   Palette as the guide kit: navy #1B4965, amber #B45309, cream #F7F0E8,
   tan #E0D3C2 hairlines, page ground #EFE7DB.
   ========================================================================== */

.cg {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto 26px;
  text-align: left;
}
.cg *,
.cg *::before,
.cg *::after { box-sizing: border-box; }
.cg [hidden] { display: none !important; }

/* LAYOUT. Desktop: the questions on the left, the preview on the right,
   sticky so it stays in view while the colours and shapes are changed.
   Phones: what the code holds, then the preview, then the styling, so the
   code is on screen straight after the boxes that make it.
   Rows are auto + 1fr so a preview taller than the left column pushes the
   spare height into the second row, not between the first two panels. */
.cg-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "content preview" "design preview";
  gap: 0 26px;
  align-items: start;
}
.cg-content { grid-area: content; }
.cg-design { grid-area: design; }
.cg-preview { grid-area: preview; position: sticky; top: 16px; }

.cg-panel {
  margin: 0 0 20px;
  padding: 26px 28px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.cg-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 3px solid #B45309;
  font: 700 24px/1.25 "Avenir Next", Lota, sans-serif;
  color: #1B4965;
  text-align: left;
}
.cg .guide-stepnum { width: 38px; height: 38px; font-size: 18px; line-height: 38px; }

/* THE TYPE TABS: pill buttons that wrap, the chosen one filled navy */
.cg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.cg-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px 6px 11px;
  background: #ffffff;
  border: 2px solid #E0D3C2;
  border-radius: 999px;
  font: 700 15px/1.2 Lota, sans-serif;
  color: #1B4965;
  cursor: pointer;
}
.cg-tab svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cg-tab:hover { border-color: #1B4965; }
.cg-tab[aria-selected="true"] { background: #1B4965; border-color: #1B4965; color: #ffffff; }
.cg-tab:focus-visible,
.cg-btn:focus-visible,
.cg-acc-head:focus-visible,
.cg-link:focus-visible { outline: 3px solid rgba(27, 73, 101, 0.45); outline-offset: 2px; }

/* section 44 styles text, email, tel and url boxes; these two need the same */
.cg input[type="number"],
.cg input[type="datetime-local"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #CFC6B8;
  border-radius: 10px;
  font: 400 16px/1.35 Lota, sans-serif;
  color: #333333;
}
.cg input[type="number"]:focus,
.cg input[type="datetime-local"]:focus {
  outline: none;
  border-color: #1B4965;
  box-shadow: 0 0 0 3px rgba(27, 73, 101, 0.18);
}
/* a number with its unit after it */
.cg-unit { display: flex; align-items: center; gap: 8px; }
.cg-unit span { font: 700 16px/1 Lota, sans-serif; color: #6B6B6B; }

/* SEGMENTED CHOICE (rotation, font): radio buttons as one row of pills */
.cg-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.cg-seg legend {
  margin: 0 0 8px;
  padding: 0;
  font: 700 16px/1.3 Lota, sans-serif;
  color: #1B4965;
}
.cg .cg-seg label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 6px 16px;
  background: #ffffff;
  border: 2px solid #E0D3C2;
  border-radius: 999px;
  font: 700 15px/1.2 Lota, sans-serif;
  color: #1B4965;
  cursor: pointer;
}
.cg-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cg .cg-seg label:has(input:checked) { background: #1B4965; border-color: #1B4965; color: #ffffff; }
.cg .cg-seg label:has(input:focus-visible) { outline: 3px solid rgba(27, 73, 101, 0.45); outline-offset: 2px; }

.cg .pb-grid + .pb-grid,
.cg .pb-grid + .pb-field,
.cg .pb-field + .pb-grid { margin-top: 18px; }
.cg .pb-hint a { color: #1B4965; }
.cg-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
}
.cg .cg-check label {
  margin: 0;
  font: 400 16px/1.4 Lota, sans-serif;
  color: #333333;
  cursor: pointer;
}
.cg-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1B4965; }

/* THE ACCORDION PANELS (colours, logo, shapes, more options) */
.cg-acc { padding: 0; }
.cg-acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  list-style: none;
  cursor: pointer;
  font: 700 22px/1.25 "Avenir Next", Lota, sans-serif;
  color: #1B4965;
  border-radius: 14px;
}
.cg-acc-head::-webkit-details-marker { display: none; }
.cg-acc-title { flex: 1 1 auto; }
.cg-acc-hint { font: 400 15px/1.3 Lota, sans-serif; color: #6B6B6B; }
.cg-acc-chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 3px solid #B45309;
  border-bottom: 3px solid #B45309;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.15s ease;
}
.cg-acc[open] > .cg-acc-head .cg-acc-chev { transform: rotate(225deg) translate(-3px, -3px); }
.cg-acc[open] > .cg-acc-head { border-bottom: 1px solid #E0D3C2; border-radius: 14px 14px 0 0; }
.cg-acc-body { padding: 22px 28px 26px; }

/* colour picker + hex box pairs */
.cg-colours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.cg-colour { min-width: 0; }
.cg-colour-pair { display: flex; align-items: center; gap: 8px; }
.cg .cg-colour-pair input[type="text"] { width: 112px; font-family: Menlo, Consolas, monospace; text-transform: lowercase; }
.cg-sub {
  margin: 24px 0 12px;
  padding: 18px 0 0;
  border-top: 1px solid #E0D3C2;
  font: 700 18px/1.3 "Avenir Next", Lota, sans-serif;
  color: #1B4965;
  text-align: left;
}
.cg-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* SHAPE TILES: radio buttons drawn as picture tiles. The input sits over
   the whole tile, transparent, so it is still the thing that is clicked,
   focused and announced. */
.cg-fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.cg-fieldset:last-child { margin-bottom: 0; }
.cg-fieldset legend {
  margin: 0 0 8px;
  padding: 0;
  font: 700 16px/1.3 Lota, sans-serif;
  color: #1B4965;
}
.cg-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px;
}
.cg .cg-shape {
  position: relative;
  display: block;
  margin: 0;
  padding: 8px;
  background: #ffffff;
  border: 2px solid #E0D3C2;
  border-radius: 10px;
  cursor: pointer;
}
.cg-shape input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cg-shape svg { display: block; width: 100%; height: auto; aspect-ratio: 1; fill: #1B4965; }
.cg .cg-shape:hover { border-color: #1B4965; }
.cg .cg-shape:has(input:checked) { border-color: #1B4965; background: #F7F0E8; box-shadow: inset 0 0 0 1px #1B4965; }
.cg .cg-shape:has(input:focus-visible) { outline: 3px solid rgba(27, 73, 101, 0.45); outline-offset: 2px; }

/* visually hidden, still read out */
.cg-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* SLIDERS with their value on the label line */
.cg-range { margin: 18px 0 0; }
.cg .cg-range label { display: flex; justify-content: space-between; gap: 12px; }
.cg-range output { font: 700 16px/1.3 Lota, sans-serif; color: #B45309; white-space: nowrap; }
.cg-range input[type="range"] { display: block; width: 100%; height: 28px; margin: 0; accent-color: #1B4965; cursor: pointer; }

/* BUTTONS. Download PNG is the amber pill the quote button and the prompt
   builder's copy button use; the vector formats are navy outline pills. */
.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: #ffffff;
  border: 2px solid #1B4965;
  border-radius: 999px;
  font: 700 16px/1.2 Lota, sans-serif;
  color: #1B4965;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cg-btn:hover { background: #1B4965; color: #ffffff; }
.cg-btn-main { background: #B45309; border-color: #B45309; color: #ffffff; }
.cg-btn-main:hover { background: #8F4207; border-color: #8F4207; }
.cg-btn:disabled,
.cg-btn:disabled:hover { background: #ffffff; border-color: #D5CCC0; color: #9A9A9A; cursor: not-allowed; }
.cg-btn-main:disabled,
.cg-btn-main:disabled:hover { background: #E3D7C8; border-color: #E3D7C8; color: #8A7F72; }
/* the logo upload is a <label>, so section 44's `.pb label` (display:block)
   has to be outranked to keep it a centred pill */
.cg .cg-file { display: inline-flex; margin: 0; font: 700 16px/1.2 Lota, sans-serif; color: #1B4965; }
.cg .cg-file:hover { color: #ffffff; }
.cg-vh:focus-visible + .cg-file { outline: 3px solid rgba(27, 73, 101, 0.45); outline-offset: 2px; }
.cg-link {
  padding: 0;
  background: none;
  border: 0;
  font: 700 15px/1.3 Lota, sans-serif;
  color: #B45309;
  text-decoration: underline;
  cursor: pointer;
}

.cg-dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}
.cg-dl .cg-btn-main { grid-column: 1 / -1; min-height: 50px; font-size: 18px; }
.cg-dl .cg-btn { padding: 0 8px; }

/* THE PREVIEW */
.cg-preview .cg-panel { padding: 22px; }
.cg-stage {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #E0D3C2;
  border-radius: 10px;
}
/* a transparent background shows as the usual grey check */
.cg-stage.is-clear {
  background-color: #ffffff;
  background-image: conic-gradient(#E9E4DC 25%, transparent 0 50%, #E9E4DC 0 75%, transparent 0);
  background-size: 18px 18px;
}
.cg-art svg { display: block; width: 100%; height: auto; }
/* barcodes are wide, or tall once turned: cap the height and let the
   drawing scale down inside the box (preserveAspectRatio meet) */
.cg-art.is-wide svg { max-height: 300px; }
.cg-example {
  margin: 10px 0 0;
  font: 400 15px/1.4 Lota, sans-serif;
  color: #6B6B6B;
  text-align: center;
}
.cg-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #FDECEA;
  border-left: 4px solid #B42318;
  border-radius: 0 8px 8px 0;
  font: 700 15px/1.4 Lota, sans-serif;
  color: #8A1C12;
}
.cg-scan {
  margin: 12px 0 0;
  padding: 0 0 0 26px;
  position: relative;
  min-height: 1.4em;
  font: 400 15px/1.4 Lota, sans-serif;
  color: #555555;
}
.cg-scan::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  font-weight: 700;
  text-align: center;
}
.cg-scan.is-ok { color: #1E6B34; }
.cg-scan.is-ok::before { content: "\2713"; }
.cg-scan.is-bad { color: #8A1C12; }
.cg-scan.is-bad::before { content: "!"; }
.cg-scan.is-wait::before { content: "\2026"; }
.cg-scan.is-none { padding-left: 0; }
.cg-warns {
  margin: 12px 0 0;
  padding: 10px 14px 10px 30px;
  background: #FFF4E5;
  border-left: 4px solid #B45309;
  border-radius: 0 8px 8px 0;
  list-style: disc;
  font: 400 15px/1.4 Lota, sans-serif;
  color: #5A3A12;
}
.cg-warns li { margin: 0 0 4px; padding: 0; }
.cg-warns li:last-child { margin-bottom: 0; }
.cg-note,
.cg-meta {
  margin: 12px 0 0;
  font: 400 14px/1.4 Lota, sans-serif;
  color: #6B6B6B;
}
.cg-card svg { display: block; width: 100%; height: auto; }
.cg-preview .cg-sub { margin-top: 0; padding-top: 0; border-top: 0; }

/* the size readout under the barcode */
.cg-size {
  margin: 10px 0 0;
  font: 700 15px/1.4 Lota, sans-serif;
  color: #1B4965;
  text-align: center;
}

.cg-noscript {
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 16px 20px;
  background: #FFF4E5;
  border-left: 4px solid #B45309;
  font: 400 17px/1.5 Lota, sans-serif;
}

/* the barcode types table */
.cg-types { width: 100%; border-collapse: collapse; font: 400 16px/1.45 Lota, sans-serif; color: #444444; }
.cg-types th,
.cg-types td { padding: 10px 12px; border-bottom: 1px solid #E0D3C2; text-align: left; vertical-align: top; }
.cg-types thead th { background: #1B4965; color: #ffffff; font-weight: 700; }
.cg-types tbody th { color: #1B4965; font-weight: 700; white-space: nowrap; }
.cg-types tbody tr:nth-child(even) { background: #F7F0E8; }

@media (max-width: 1100px) {
  .cg-main { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 20px; }
}
@media (max-width: 900px) {
  .cg-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "content" "preview" "design";
  }
  .cg-preview { position: static; }
  .cg-preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
@media (max-width: 640px) {
  .cg-panel { padding: 22px 18px; margin-bottom: 16px; }
  .cg-panel-title { font-size: 21px; gap: 12px; }
  .cg-acc-head { padding: 16px 18px; font-size: 20px; gap: 12px; }
  .cg-acc-body { padding: 18px 18px 22px; }
  .cg-preview .cg-panel { padding: 18px; }
  .cg-preview-pair { display: block; }
  .cg-tab { font-size: 14px; min-height: 38px; padding: 5px 12px 5px 9px; }
  .cg-colours { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cg-shapes { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
  .cg .cg-shape { padding: 6px; }
  .cg-types { font-size: 15px; }
  .cg-types th,
  .cg-types td { padding: 8px; }
  .cg-types tbody th { white-space: normal; }
}