/* =========================================================
   STAFF-REDESIGN-3K – QR Scanner Mask / Status Feinschliff
   Ziel: Kamera innen klar, Abdunklung nur außerhalb, SCANNT mittig über Rahmen.
   ========================================================= */

#screenOrder.order-qr-active #qrScannerBox{
  --qr-frame-inset:42px;
  --qr-frame-radius:14px;
  --qr-mask-dark:rgba(0,0,0,.50);
  overflow:hidden!important;
  isolation:isolate!important;
}

/* Kamera bleibt im gesamten Videolayer technisch klar; Maskierung kommt nur über den Rahmen-Shadow. */
#screenOrder.order-qr-active #qrScannerBox #qrVideo,
#screenOrder.order-qr-active #qrScannerBox #qrCanvas{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  transform:none!important;
  z-index:0!important;
}

/* Keine Vollflächen-Overlays auf der Scannerbox – sonst wird auch der gelbe Zielkasten abgedunkelt. */
#screenOrder.order-qr-active #qrScannerBox::before,
#screenOrder.order-qr-active #qrScannerBox::after{
  content:none!important;
  display:none!important;
}

/* Der gelbe Rahmen selbst erzeugt die Abdunklung NUR außerhalb über box-shadow. */
#screenOrder.order-qr-active #qrScannerBox .scanner-frame{
  inset:var(--qr-frame-inset)!important;
  border-radius:var(--qr-frame-radius)!important;
  background:transparent!important;
  border:2px solid rgba(245,196,0,.94)!important;
  box-shadow:0 0 0 999px var(--qr-mask-dark),0 0 22px rgba(245,196,0,.18)!important;
  z-index:4!important;
  pointer-events:none!important;
}

@keyframes framePulse3k{
  0%,100%{box-shadow:0 0 0 999px var(--qr-mask-dark),0 0 0 rgba(245,196,0,0);border-color:rgba(245,196,0,.82)}
  50%{box-shadow:0 0 0 999px var(--qr-mask-dark),0 0 28px rgba(245,196,0,.34);border-color:rgba(245,196,0,1)}
}
#screenOrder.order-qr-active #qrScannerBox:not(.is-collapsed) .scanner-frame{
  animation:framePulse3k 1.8s ease-in-out infinite!important;
}

/* SCANNT exakt mittig über dem gelben Rahmen. */
#screenOrder.order-qr-active #qrScannerBox .scanner-status-pill,
#screenOrder.order-qr-active #qrScanStatus{
  left:50%!important;
  right:auto!important;
  top:calc(var(--qr-frame-inset) - 30px)!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  white-space:nowrap!important;
  text-align:center!important;
}

/* Scanbalken: horizontal sauber innerhalb des gelben Kastens. Vertikale Bewegung bleibt JS-gesteuert aus 3F/3J. */
#screenOrder.order-qr-active #qrScannerBox .scanner-line,
#screenOrder.order-qr-active #qrScannerLine{
  left:calc(var(--qr-frame-inset) + 6px)!important;
  right:calc(var(--qr-frame-inset) + 6px)!important;
  width:auto!important;
  z-index:7!important;
  pointer-events:none!important;
}

#screenOrder.order-qr-active #qrScannerLine::after{
  left:12%!important;
  right:12%!important;
}

/* Ecken passend zum Rahmen halten. */
#screenOrder.order-qr-active #qrScannerBox .scan-corners .tl{top:var(--qr-frame-inset)!important;left:var(--qr-frame-inset)!important;z-index:8!important;}
#screenOrder.order-qr-active #qrScannerBox .scan-corners .tr{top:var(--qr-frame-inset)!important;right:var(--qr-frame-inset)!important;z-index:8!important;}
#screenOrder.order-qr-active #qrScannerBox .scan-corners .bl{bottom:var(--qr-frame-inset)!important;left:var(--qr-frame-inset)!important;z-index:8!important;}
#screenOrder.order-qr-active #qrScannerBox .scan-corners .br{bottom:var(--qr-frame-inset)!important;right:var(--qr-frame-inset)!important;z-index:8!important;}

/* Erkannter Scan: vorhandene grüne Kompaktansicht nicht kaputtmachen. */
#screenOrder.order-qr-active #qrScannerBox.is-collapsed{
  --qr-frame-inset:20px;
  --qr-mask-dark:rgba(0,0,0,.18);
}
#screenOrder.order-qr-active #qrScannerBox.is-collapsed .scanner-frame{
  animation:none!important;
  box-shadow:0 0 0 999px var(--qr-mask-dark),0 0 24px rgba(46,204,113,.22)!important;
  border-color:rgba(46,204,113,.88)!important;
}
#screenOrder.order-qr-active #qrScannerBox.is-collapsed .scanner-status-pill,
#screenOrder.order-qr-active #qrScannerBox.is-collapsed #qrScanStatus{
  top:16px!important;
}

@media (max-width:390px){
  #screenOrder.order-qr-active #qrScannerBox{--qr-frame-inset:34px;--qr-mask-dark:rgba(0,0,0,.50);}
  #screenOrder.order-qr-active #qrScannerBox .scanner-status-pill,
  #screenOrder.order-qr-active #qrScanStatus{top:calc(var(--qr-frame-inset) - 26px)!important;}
}