/* ============================================================
   BARCODE SCANNER
   The trigger is a single icon button appended inside the existing
   .search-inline flex row — no change to the search field itself. It ships
   with the `hidden` attribute and js/barcode-scan.js only unhides it on a
   touch/small-screen device that actually has a camera, so the desktop
   header is untouched.
   ============================================================ */

/* The trigger used to be a bare 21px outline glyph sitting flush in the
   row, the same visual weight as the decorative magnifier on the left — so
   it read as ornament rather than as something you could press. It is now
   a defined chip: a soft green tint plate, a hairline rule separating it
   from the text field, and a slightly heavier stroke.

   Tint rather than a solid green fill on purpose. Solid reads as the
   primary submit control and competes with the input for attention, and
   on a header already carrying green accents it starts to look like the
   search button. The tint plate is unmistakably a button while staying
   clearly secondary to the text field.

   34px also lifts the tap target off the old 21px, which was well under
   the 44px comfortable-touch guideline. */
.scan-btn{
  background:rgba(143,194,42,.15);
  border:none;
  padding:0;
  margin:0;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  color:var(--green-dark);
  transition:background .15s ease;
}
/* Hairline rule reads as "separate action", the way a split button does.
   Drawn as a border on the button so it cannot shift the row's layout. */
.scan-btn::before{
  content:'';
  position:absolute;
  left:-10px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line);
}
.scan-btn{position:relative;}
.scan-btn:hover{background:rgba(143,194,42,.24);}
.scan-btn:active{background:rgba(143,194,42,.32);}
.scan-btn[hidden]{display:none;}
.scan-btn svg{width:22px;height:22px;stroke-width:2.1;}
/* Hidden by default so the approved touch chip is untouched — the word is
   revealed only for the wider desktop segment below. */
.scan-btn .scan-label{display:none;}

/* ---------- desktop / mouse pointer ----------
   On a 575px field the 34px thumb chip left a wide, dead margin of white
   to its right — the icon read as something dropped into the bar rather
   than built into it. The desktop control is now a full-height segment
   bonded to the right edge of the field: it bleeds out through the bar's
   own padding via negative margins, so it stands 45px tall and meets the
   rounded corners, while the bar's height is completely unchanged.

   The split-action reading survives and is stronger — a hairline rule and
   a tint plate now divide two segments of one control, the way a search
   field with an integrated action does, instead of an icon hovering in
   space. The input keeps the overwhelming share of the width, so it
   stays plainly primary.

   Tint, not a solid green fill: solid would read as submit and compete
   with the field. */
.scan-btn[data-pointer="mouse"]{
  align-self:stretch;
  width:76px;
  flex-direction:column;
  height:auto;
  /* Cancels the .search-inline padding (10.45px 18px) so the segment
     reaches the bar's edges. Layout height is unaffected — the bar is
     still sized by its tallest in-flow child, the 24px search icon. */
  margin:-10.45px -18px -10.45px 0;
  border-radius:0 8px 8px 0;
  gap:0;
}
.scan-btn[data-pointer="mouse"] svg{width:22px;height:22px;}
/* The label is what makes this an action rather than a glyph. First-time
   visitors do not necessarily read a barcode outline as "scan the box in
   your hand", and scanning is the fastest route into a quote. Small caps
   in the same green keeps it informative without competing. */
.scan-btn[data-pointer="mouse"] .scan-label{
  display:block;font-family:'Inter';font-size:.6rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;line-height:1;margin-top:3px;
}
/* Rule spans the full segment edge, so the two halves read as one control. */
.scan-btn[data-pointer="mouse"]::before{
  left:0;
  top:0;
  bottom:0;
}
.scan-btn[data-pointer="mouse"]::after{content:none;}

/* ---------- full-screen camera overlay ---------- */
body.scan-open{overflow:hidden;}

.scan-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#0b0d0b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
}

.scan-stage{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:3/4;
  max-height:62vh;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}

.scan-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Framing guide only — detection reads the whole frame. Sized to about 75%
   of the screen width and 150px tall so a full GameCube barcode fits inside
   it without the customer having to line the case up precisely. */
.scan-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:75vw;
  max-width:440px;
  height:150px;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.9);
  border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
  pointer-events:none;
}

.scan-hint{
  margin:0;
  max-width:520px;
  text-align:center;
  color:#fff;
  font-size:.95rem;
  line-height:1.45;
}

.scan-cancel{
  background:#fff;
  color:#1b1f1b;
  border:none;
  border-radius:999px;
  padding:12px 34px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

/* Temporary diagnostic line: which stage the scanner reached, plus a frame
   counter that only moves if the decode loop is actually running. Hidden
   entirely when STATUS_DEBUG is false in js/barcode-scan.js. */
.scan-status{
  margin:-8px 0 0;
  max-width:520px;
  text-align:center;
  color:#bfe3a8;
  font-size:.85rem;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.scan-status[hidden]{display:none;}
.scan-cancel[hidden]{display:none;}