/* STAFF-REDESIGN-3F – QR-Screen: Mockup-Werte + aktiver Scanbalken
   Ziel: nicht weiter nachbauen, sondern die QR-Proportionen aus ma-app-redesign-flow-mockup-v23.html wiederherstellen. */

#screenOrder.order-qr-active > .screen-title,
#screenOrder.order-qr-active > .orderModeGrid,
#screenOrder.order-qr-active > .quickStartCards,
#screenOrder.order-qr-active > .order-picker{
  display:none!important;
}

#screenOrder.order-qr-active #main.scan-panel{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Titel / Zurück exakt näher am Mockup */
#screenOrder.order-qr-active .screen-title.inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:18px 2px 10px!important;
}
#screenOrder.order-qr-active .screen-title.inner h2{
  margin:0!important;
  font-size:21px!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
  max-width:none!important;
  color:var(--text)!important;
}
#screenOrder.order-qr-active .screen-title.inner p{
  margin:5px 0 0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.35!important;
  max-width:270px!important;
}
#screenOrder.order-qr-active .screen-title.inner .back-btn{
  height:38px!important;
  min-height:38px!important;
  min-width:auto!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}

/* Flow-Steps 1:1 wie Mockup */
#screenOrder.order-qr-active .flow-steps{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:10px 0 12px!important;
}
#screenOrder.order-qr-active .flow-step{
  min-height:0!important;
  height:auto!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.035)!important;
  border-radius:12px!important;
  padding:9px 10px!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
#screenOrder.order-qr-active .flow-step:before{
  content:attr(data-step)!important;
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.06)!important;
  color:var(--subtle)!important;
  font-size:10px!important;
}
#screenOrder.order-qr-active .flow-step.active{
  border-color:rgba(245,196,0,.35)!important;
  background:rgba(245,196,0,.08)!important;
  color:var(--yellow)!important;
}
#screenOrder.order-qr-active .flow-step.active:before{
  background:var(--yellow)!important;
  color:#171300!important;
}

/* Scan-Panel / Box nach Mockup */
#screenOrder.order-qr-active .qr-scan-card,
#screenOrder.order-qr-active #qrScanPanel{
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),var(--panel)!important;
  border-radius:var(--radius-xl)!important;
  padding:14px!important;
  margin:0!important;
  box-shadow:none!important;
}
#screenOrder.order-qr-active .scanner-box{
  position:relative!important;
  aspect-ratio:1/1!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:390px!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:radial-gradient(circle at 50% 40%,rgba(77,163,255,.16),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#090d13!important;
  border:1px solid rgba(255,255,255,.12)!important;
  display:grid!important;
  place-items:center!important;
  transition:all .38s ease!important;
  padding:0!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed{
  aspect-ratio:auto!important;
  min-height:98px!important;
  max-height:118px!important;
}

/* Kamera: klar im Scanrahmen; Abdunklung ausschließlich über frame-box-shadow außerhalb */
#screenOrder.order-qr-active #qrVideo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  z-index:0!important;
  background:#05070a!important;
}
#screenOrder.order-qr-active .scanner-box:before,
#screenOrder.order-qr-active .scanner-box:after{
  content:none!important;
  display:none!important;
}

#screenOrder.order-qr-active .scanner-frame{
  position:absolute!important;
  inset:42px!important;
  border:2px solid rgba(245,196,0,.88)!important;
  border-radius:14px!important;
  box-shadow:0 0 0 999px rgba(0,0,0,.24)!important;
  animation:framePulse3e 1.8s ease-in-out infinite!important;
  transition:all .35s ease!important;
  z-index:3!important;
  pointer-events:none!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-frame{
  inset:20px!important;
  border-color:rgba(46,204,113,.88)!important;
  animation:none!important;
  box-shadow:0 0 0 999px rgba(0,0,0,.16),0 0 24px rgba(46,204,113,.22)!important;
}
@keyframes framePulse3e{
  0%,100%{box-shadow:0 0 0 999px rgba(0,0,0,.24),0 0 0 rgba(245,196,0,0);border-color:rgba(245,196,0,.78)}
  50%{box-shadow:0 0 0 999px rgba(0,0,0,.24),0 0 24px rgba(245,196,0,.28);border-color:rgba(245,196,0,1)}
}

/* Scanbalken exakt innerhalb des gelben Rahmens */
#screenOrder.order-qr-active .scanner-line{
  position:absolute!important;
  left:48px!important;
  right:48px!important;
  top:54px!important;
  width:auto!important;
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent 0%,rgba(245,196,0,.35) 16%,rgba(245,196,0,1) 50%,rgba(245,196,0,.35) 84%,transparent 100%)!important;
  box-shadow:0 0 18px rgba(245,196,0,.75),0 0 42px rgba(245,196,0,.32)!important;
  animation:none!important; /* Bewegung übernimmt JS, weil top!important sonst CSS-Keyframes blockiert. */
  z-index:4!important;
  overflow:visible!important;
}
#screenOrder.order-qr-active .scanner-line:before{content:none!important;display:none!important;}
#screenOrder.order-qr-active .scanner-line:after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  top:-16px!important;
  height:36px!important;
  background:linear-gradient(180deg,transparent,rgba(245,196,0,.18),transparent)!important;
  filter:blur(1px)!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-line{display:none!important;}
@keyframes scanMove3fFallback{
  0%{top:54px;opacity:.68}
  8%{opacity:1}
  50%{top:calc(100% - 59px);opacity:1}
  92%{opacity:1}
  100%{top:54px;opacity:.68}
}

/* Ecken / Status / Text exakt kleiner wie Mockup */
#screenOrder.order-qr-active .scan-corners span{
  position:absolute!important;
  width:34px!important;
  height:34px!important;
  border-color:var(--yellow)!important;
  opacity:.95!important;
  transition:all .35s!important;
  z-index:5!important;
}
#screenOrder.order-qr-active .scan-corners .tl{top:42px!important;left:42px!important;border-top:4px solid!important;border-left:4px solid!important;border-radius:12px 0 0 0!important;}
#screenOrder.order-qr-active .scan-corners .tr{top:42px!important;right:42px!important;border-top:4px solid!important;border-right:4px solid!important;border-radius:0 12px 0 0!important;}
#screenOrder.order-qr-active .scan-corners .bl{bottom:42px!important;left:42px!important;border-bottom:4px solid!important;border-left:4px solid!important;border-radius:0 0 0 12px!important;}
#screenOrder.order-qr-active .scan-corners .br{bottom:42px!important;right:42px!important;border-bottom:4px solid!important;border-right:4px solid!important;border-radius:0 0 12px 0!important;}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scan-corners span{display:none!important;}

#screenOrder.order-qr-active .scanner-status-pill{
  position:absolute!important;
  left:50%!important;
  top:18px!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(245,196,0,.14)!important;
  border:1px solid rgba(245,196,0,.35)!important;
  color:var(--yellow)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  box-shadow:0 0 22px rgba(245,196,0,.16)!important;
  animation:statusPulse3e 1.2s ease-in-out infinite!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-status-pill{
  background:rgba(46,204,113,.14)!important;
  border-color:rgba(46,204,113,.35)!important;
  color:var(--green)!important;
  animation:none!important;
}
@keyframes statusPulse3e{
  0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.04)}
}

#screenOrder.order-qr-active .scanner-hint{
  position:relative!important;
  z-index:7!important;
  text-align:center!important;
  padding:0 54px!important;
  transform:none!important;
}
#screenOrder.order-qr-active .scanner-hint strong{
  display:block!important;
  font-size:14px!important;
  line-height:1.25!important;
  margin:0 0 6px!important;
}
#screenOrder.order-qr-active .scanner-hint span{
  display:block!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.4!important;
}
#screenOrder.order-qr-active .scanner-success-icon{
  display:none!important;
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  margin:0 auto 8px!important;
  place-items:center!important;
  background:rgba(46,204,113,.15)!important;
  color:var(--green)!important;
  border:1px solid rgba(46,204,113,.26)!important;
  font-weight:900!important;
  font-size:20px!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-success-icon{display:grid!important;margin-bottom:0!important;}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-hint span,
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-hint strong{display:none!important;}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-hint{padding:0!important;}

/* Buttons und Eingabe exakt kleiner wie Mockup */
#screenOrder.order-qr-active .scan-actions,
#screenOrder.order-qr-active .manual-token{
  display:grid!important;
  gap:8px!important;
  margin-top:12px!important;
}
#screenOrder.order-qr-active .scan-actions{grid-template-columns:1fr 1fr!important;}
#screenOrder.order-qr-active .manual-token{grid-template-columns:1fr auto!important;}
#screenOrder.order-qr-active .btn,
#screenOrder.order-qr-active .back-btn{
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:850!important;
}
#screenOrder.order-qr-active .btn{
  padding:10px 12px!important;
  min-height:39px!important;
}
#screenOrder.order-qr-active .btn.large,
#screenOrder.order-qr-active .scan-actions .btn{
  min-height:46px!important;
  font-size:13px!important;
  line-height:1.15!important;
}
#screenOrder.order-qr-active .input,
#screenOrder.order-qr-active .manual-token .input{
  width:100%!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--text)!important;
  min-height:44px!important;
  border-radius:10px!important;
  padding:0 12px!important;
  font-size:13px!important;
  font-weight:800!important;
  outline:none!important;
}
#screenOrder.order-qr-active #loadOrderBtn{
  min-height:44px!important;
  min-width:auto!important;
  border-radius:10px!important;
  font-size:12px!important;
}

/* Kleine Screens: Mockup bleibt proportional, nicht künstlich aufblähen */
@media(max-width:560px){
  #screenOrder.order-qr-active .screen-title.inner{margin:18px 2px 10px!important;gap:12px!important;}
  #screenOrder.order-qr-active .screen-title.inner h2{font-size:21px!important;max-width:none!important;}
  #screenOrder.order-qr-active .screen-title.inner p{font-size:12px!important;max-width:245px!important;}
  #screenOrder.order-qr-active .screen-title.inner .back-btn{height:38px!important;font-size:12px!important;min-width:auto!important;border-radius:10px!important;}
  #screenOrder.order-qr-active .flow-step{font-size:11px!important;padding:9px 10px!important;min-height:0!important;border-radius:12px!important;}
  #screenOrder.order-qr-active .flow-step:before{width:20px!important;height:20px!important;flex-basis:20px!important;font-size:10px!important;}
  #screenOrder.order-qr-active .scanner-box{aspect-ratio:1/1!important;max-height:390px!important;border-radius:16px!important;}
  #screenOrder.order-qr-active .scanner-frame{inset:42px!important;border-radius:14px!important;}
  #screenOrder.order-qr-active .scanner-line{left:48px!important;right:48px!important;top:54px!important;height:5px!important;}
  #screenOrder.order-qr-active .scan-corners .tl{top:42px!important;left:42px!important;}
  #screenOrder.order-qr-active .scan-corners .tr{top:42px!important;right:42px!important;}
  #screenOrder.order-qr-active .scan-corners .bl{bottom:42px!important;left:42px!important;}
  #screenOrder.order-qr-active .scan-corners .br{bottom:42px!important;right:42px!important;}
  #screenOrder.order-qr-active .scanner-status-pill{top:18px!important;font-size:10px!important;}
  #screenOrder.order-qr-active .scanner-hint{padding:0 46px!important;transform:none!important;}
  #screenOrder.order-qr-active .scanner-hint strong{font-size:14px!important;}
  #screenOrder.order-qr-active .scanner-hint span{font-size:12px!important;}
  #screenOrder.order-qr-active .scan-actions .btn{min-height:46px!important;font-size:13px!important;}
}

@media(max-width:390px){
  #screenOrder.order-qr-active .scanner-frame{inset:34px!important;}
  #screenOrder.order-qr-active .scanner-line{left:40px!important;right:40px!important;top:46px!important;}
  @keyframes scanMove3fFallback{
    0%{top:46px;opacity:.68}
    8%{opacity:1}
    50%{top:calc(100% - 51px);opacity:1}
    92%{opacity:1}
    100%{top:46px;opacity:.68}
  }
  #screenOrder.order-qr-active .scan-corners .tl{top:34px!important;left:34px!important;}
  #screenOrder.order-qr-active .scan-corners .tr{top:34px!important;right:34px!important;}
  #screenOrder.order-qr-active .scan-corners .bl{bottom:34px!important;left:34px!important;}
  #screenOrder.order-qr-active .scan-corners .br{bottom:34px!important;right:34px!important;}
}