/* STAFF-REDESIGN-3C – QR-Screen kompakter, Kamera sichtbar, Scan-Animation repariert */

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

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

#screenOrder.order-qr-active .screen-title.inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  margin:24px 4px 14px!important;
}
#screenOrder.order-qr-active .screen-title.inner h2{
  font-size:27px!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
  margin:0!important;
  color:#fff!important;
  max-width:260px!important;
}
#screenOrder.order-qr-active .screen-title.inner p{
  font-size:15px!important;
  line-height:1.32!important;
  color:var(--muted)!important;
  margin:7px 0 0!important;
  max-width:310px!important;
}
#screenOrder.order-qr-active .screen-title.inner .back-btn{
  min-width:96px!important;
  height:52px!important;
  border-radius:17px!important;
  font-size:16px!important;
  font-weight:900!important;
  padding:0 14px!important;
}

#screenOrder.order-qr-active .flow-steps{
  margin:0 4px 12px!important;
  gap:9px!important;
}
#screenOrder.order-qr-active .flow-step{
  min-height:52px!important;
  border-radius:17px!important;
  font-size:15px!important;
  letter-spacing:.08em!important;
  padding:0 14px!important;
}
#screenOrder.order-qr-active .flow-step:before{
  width:28px!important;
  height:28px!important;
  font-size:14px!important;
  flex:0 0 28px!important;
}

#screenOrder.order-qr-active .qr-scan-card{
  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:24px!important;
  padding:12px!important;
  margin-top:10px!important;
  overflow:hidden!important;
}

/* Kamera ist wieder sichtbar. Sie liegt unter der Mockup-Scanner-UI und wird nur leicht abgedunkelt. */
#screenOrder.order-qr-active #qrVideo{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.72!important;
  filter:saturate(.82) contrast(.9) brightness(.68)!important;
  pointer-events:none!important;
  z-index:0!important;
}
#screenOrder.order-qr-active .scanner-box:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:radial-gradient(circle at 50% 42%,rgba(77,163,255,.12),transparent 42%),linear-gradient(180deg,rgba(9,13,19,.18),rgba(9,13,19,.52))!important;
  pointer-events:none!important;
}

#screenOrder.order-qr-active .scanner-box{
  position:relative!important;
  aspect-ratio:1/1!important;
  width:100%!important;
  max-height:345px!important;
  min-height:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#090d13!important;
  border:1px solid rgba(255,255,255,.12)!important;
  display:grid!important;
  place-items:center!important;
  transition:all .38s ease!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed{
  aspect-ratio:auto!important;
  min-height:92px!important;
  max-height:112px!important;
}

#screenOrder.order-qr-active .scanner-frame{
  position:absolute!important;
  inset:36px!important;
  border:2px solid rgba(245,196,0,.88)!important;
  border-radius:17px!important;
  box-shadow:0 0 0 999px rgba(0,0,0,.20)!important;
  animation:framePulse3c 1.8s ease-in-out infinite!important;
  transition:all .35s ease!important;
  z-index:3!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;
}

#screenOrder.order-qr-active .scanner-line{
  position:absolute!important;
  left:43px!important;
  right:43px!important;
  top:46px!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:scanMove3c 1.65s ease-in-out infinite!important;
  z-index:4!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;}

#screenOrder.order-qr-active .scan-corners span{
  position:absolute!important;
  width:30px!important;
  height:30px!important;
  border-color:#fff!important;
  opacity:.96!important;
  z-index:5!important;
  transition:all .35s ease!important;
}
#screenOrder.order-qr-active .scan-corners .tl{top:36px!important;left:36px!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:36px!important;right:36px!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:36px!important;left:36px!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:36px!important;right:36px!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:5px 13px!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:12px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  box-shadow:0 0 22px rgba(245,196,0,.16)!important;
  animation:statusPulse3c 1.2s ease-in-out infinite!important;
}
#screenOrder.order-qr-active .scanner-box.is-collapsed .scanner-status-pill,
#screenOrder.order-qr-active .scanner-status-pill.good{
  background:rgba(46,204,113,.14)!important;
  border-color:rgba(46,204,113,.35)!important;
  color:var(--green)!important;
  animation:none!important;
}

#screenOrder.order-qr-active .scanner-hint{
  position:relative!important;
  z-index:7!important;
  text-align:center!important;
  padding:0 42px!important;
  text-shadow:0 2px 18px rgba(0,0,0,.55)!important;
}
#screenOrder.order-qr-active .scanner-hint strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.2!important;
  margin-bottom:9px!important;
  color:#fff!important;
}
#screenOrder.order-qr-active .scanner-hint span{
  display:block!important;
  color:var(--muted)!important;
  font-size:15px!important;
  line-height:1.32!important;
}
#screenOrder.order-qr-active .scanner-success-icon{
  display:none!important;
  width:54px!important;
  height:54px!important;
  border-radius:17px!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:28px!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;}

#screenOrder.order-qr-active .scan-actions{
  margin-top:12px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
#screenOrder.order-qr-active .scan-actions .btn{
  min-height:56px!important;
  border-radius:16px!important;
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
#screenOrder.order-qr-active .manual-token{
  margin-top:10px!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:9px!important;
}
#screenOrder.order-qr-active .manual-token .input{
  min-height:52px!important;
  border-radius:15px!important;
  font-size:16px!important;
  font-weight:800!important;
}
#screenOrder.order-qr-active #loadOrderBtn{
  min-width:80px!important;
  min-height:52px!important;
  border-radius:15px!important;
  font-size:16px!important;
  font-weight:900!important;
}

#screenOrder.order-qr-active #qrVehicleCheck{
  margin-top:14px!important;
  border-radius:21px!important;
  padding:16px!important;
}
#screenOrder.order-qr-active #qrVehicleCheck .step-label{
  font-size:15px!important;
  letter-spacing:.14em!important;
}
#screenOrder.order-qr-active #qrVehicleCheck .vehicle-summary{
  font-size:16px!important;
  line-height:1.5!important;
}

@keyframes framePulse3c{
  0%,100%{box-shadow:0 0 0 999px rgba(0,0,0,.20),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,.20),0 0 24px rgba(245,196,0,.28);border-color:rgba(245,196,0,1)}
}
@keyframes scanMove3c{
  0%{transform:translateY(0);opacity:.65}
  8%{opacity:1}
  50%{transform:translateY(calc(100cqw - 92px));opacity:1}
  92%{opacity:1}
  100%{transform:translateY(0);opacity:.65}
}
@keyframes statusPulse3c{
  0%,100%{opacity:.86;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.035)}
}

@supports not (width: 1cqw){
  @keyframes scanMove3c{
    0%{transform:translateY(0);opacity:.65}
    8%{opacity:1}
    50%{transform:translateY(245px);opacity:1}
    92%{opacity:1}
    100%{transform:translateY(0);opacity:.65}
  }
}

@media(max-width:560px){
  #screenOrder.order-qr-active .screen-title.inner{margin-top:20px!important;gap:10px!important;}
  #screenOrder.order-qr-active .screen-title.inner h2{font-size:25px!important;max-width:210px!important;}
  #screenOrder.order-qr-active .screen-title.inner p{font-size:14px!important;}
  #screenOrder.order-qr-active .screen-title.inner .back-btn{min-width:88px!important;height:50px!important;font-size:15px!important;}
  #screenOrder.order-qr-active .flow-step{min-height:50px!important;font-size:14px!important;padding:0 12px!important;}
  #screenOrder.order-qr-active .scanner-box{max-height:325px!important;}
  #screenOrder.order-qr-active .scanner-frame{inset:32px!important;}
  #screenOrder.order-qr-active .scanner-line{left:39px!important;right:39px!important;top:42px!important;}
  #screenOrder.order-qr-active .scan-corners .tl{top:32px!important;left:32px!important;}
  #screenOrder.order-qr-active .scan-corners .tr{top:32px!important;right:32px!important;}
  #screenOrder.order-qr-active .scan-corners .bl{bottom:32px!important;left:32px!important;}
  #screenOrder.order-qr-active .scan-corners .br{bottom:32px!important;right:32px!important;}
  #screenOrder.order-qr-active .scanner-hint{padding:0 34px!important;}
  #screenOrder.order-qr-active .scanner-hint strong{font-size:17px!important;}
  #screenOrder.order-qr-active .scanner-hint span{font-size:14px!important;}
  #screenOrder.order-qr-active .scan-actions .btn{min-height:54px!important;font-size:16px!important;}
}