/* STAFF-REDESIGN-3D – QR optisch enger am Mockup, Kamera innen klar, Scanlinie nur im Rahmen */

/* QR-Screen: Größen wieder an Mockup zurückholen */
#screenOrder.order-qr-active .screen-title.inner{
  margin:18px 4px 12px!important;
  gap:10px!important;
  align-items:center!important;
}
#screenOrder.order-qr-active .screen-title.inner h2{
  font-size:26px!important;
  line-height:1.05!important;
  max-width:310px!important;
}
#screenOrder.order-qr-active .screen-title.inner p{
  font-size:14px!important;
  line-height:1.34!important;
  max-width:310px!important;
  margin-top:6px!important;
}
#screenOrder.order-qr-active .screen-title.inner .back-btn{
  min-width:86px!important;
  height:46px!important;
  border-radius:15px!important;
  font-size:14px!important;
  padding:0 12px!important;
}

#screenOrder.order-qr-active .flow-steps{
  margin:0 4px 11px!important;
  gap:8px!important;
}
#screenOrder.order-qr-active .flow-step{
  min-height:46px!important;
  border-radius:15px!important;
  font-size:13px!important;
  letter-spacing:.085em!important;
  padding:0 11px!important;
}
#screenOrder.order-qr-active .flow-step:before{
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  font-size:12px!important;
}

#screenOrder.order-qr-active .qr-scan-card{
  padding:12px!important;
  border-radius:24px!important;
  margin-top:8px!important;
}

#screenOrder.order-qr-active .scanner-box{
  --qr-frame-inset:42px;
  --qr-line-left:58px;
  --qr-line-top:calc(var(--qr-frame-inset) + 92px);
  --qr-line-travel:calc(100% - var(--qr-line-top) - var(--qr-frame-inset) - 18px);
  max-height:365px!important;
  border-radius:18px!important;
  background:#090d13!important;
}

/* Kamera: innen im gelben Rahmen nicht abdunkeln */
#screenOrder.order-qr-active #qrVideo{
  opacity:1!important;
  filter:none!important;
  z-index:0!important;
}

/* Vollflächen-Dunkeloverlay raus. Abdunklung passiert nur außerhalb des Scanrahmens per Box-Shadow. */
#screenOrder.order-qr-active .scanner-box:before{
  content:none!important;
  display:none!important;
}

#screenOrder.order-qr-active .scanner-frame{
  inset:var(--qr-frame-inset)!important;
  border:2px solid rgba(245,196,0,.92)!important;
  border-radius:17px!important;
  /* dunkelt nur den Bereich AUSSERHALB des gelben Scan-Kastens ab */
  box-shadow:0 0 0 999px rgba(0,0,0,.48), 0 0 32px rgba(245,196,0,.18)!important;
  z-index:3!important;
}
@keyframes framePulse3c{
  0%,100%{box-shadow:0 0 0 999px rgba(0,0,0,.48),0 0 22px rgba(245,196,0,.14);border-color:rgba(245,196,0,.82)}
  50%{box-shadow:0 0 0 999px rgba(0,0,0,.48),0 0 34px rgba(245,196,0,.28);border-color:rgba(245,196,0,1)}
}

/* Scanbalken nur innerhalb des gelben Scan-Kastens */
#screenOrder.order-qr-active .scanner-line{
  left:var(--qr-line-left)!important;
  right:var(--qr-line-left)!important;
  top:var(--qr-line-top)!important;
  height:5px!important;
  z-index:4!important;
  animation:scanMove3d 1.85s ease-in-out infinite!important;
  overflow:hidden!important;
}
#screenOrder.order-qr-active .scanner-line:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(0,0,0,.38);
}
#screenOrder.order-qr-active .scanner-line:after{
  left:18%!important;
  right:18%!important;
  top:-14px!important;
  height:33px!important;
  background:linear-gradient(180deg,transparent,rgba(245,196,0,.18),transparent)!important;
}
@keyframes scanMove3d{
  0%{transform:translateY(0);opacity:.72}
  8%{opacity:1}
  50%{transform:translateY(var(--qr-line-travel));opacity:1}
  92%{opacity:1}
  100%{transform:translateY(0);opacity:.72}
}

/* Ecken und Status enger wie im Mockup */
#screenOrder.order-qr-active .scan-corners span{
  width:31px!important;
  height:31px!important;
  z-index:5!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:27px!important;
  font-size:10px!important;
  padding:5px 12px!important;
  z-index:6!important;
}

#screenOrder.order-qr-active .scanner-hint{
  padding:0 54px!important;
  z-index:7!important;
  transform:translateY(34px)!important;
}
#screenOrder.order-qr-active .scanner-hint strong{
  font-size:15px!important;
  line-height:1.22!important;
  margin-bottom:7px!important;
}
#screenOrder.order-qr-active .scanner-hint span{
  font-size:13px!important;
  line-height:1.36!important;
}

#screenOrder.order-qr-active .scan-actions{
  margin-top:10px!important;
  gap:8px!important;
}
#screenOrder.order-qr-active .scan-actions .btn{
  min-height:50px!important;
  border-radius:15px!important;
  font-size:15px!important;
  line-height:1.15!important;
  padding:8px 12px!important;
}
#screenOrder.order-qr-active .manual-token{
  margin-top:9px!important;
  gap:8px!important;
}
#screenOrder.order-qr-active .manual-token .input{
  min-height:48px!important;
  border-radius:14px!important;
  font-size:14px!important;
}
#screenOrder.order-qr-active #loadOrderBtn{
  min-width:72px!important;
  min-height:48px!important;
  border-radius:14px!important;
  font-size:14px!important;
}

@media(max-width:560px){
  #screenOrder.order-qr-active .screen-title.inner{margin-top:16px!important;gap:8px!important;}
  #screenOrder.order-qr-active .screen-title.inner h2{font-size:24px!important;max-width:260px!important;}
  #screenOrder.order-qr-active .screen-title.inner p{font-size:13px!important;line-height:1.32!important;}
  #screenOrder.order-qr-active .screen-title.inner .back-btn{min-width:80px!important;height:43px!important;font-size:13px!important;border-radius:14px!important;}
  #screenOrder.order-qr-active .flow-step{min-height:44px!important;font-size:12px!important;padding:0 10px!important;}
  #screenOrder.order-qr-active .scanner-box{
    --qr-frame-inset:36px;
    --qr-line-left:50px;
    --qr-line-top:calc(var(--qr-frame-inset) + 82px);
    max-height:348px!important;
  }
  #screenOrder.order-qr-active .scan-corners .tl{top:36px!important;left:36px!important;}
  #screenOrder.order-qr-active .scan-corners .tr{top:36px!important;right:36px!important;}
  #screenOrder.order-qr-active .scan-corners .bl{bottom:36px!important;left:36px!important;}
  #screenOrder.order-qr-active .scan-corners .br{bottom:36px!important;right:36px!important;}
  #screenOrder.order-qr-active .scanner-status-pill{top:22px!important;font-size:10px!important;}
  #screenOrder.order-qr-active .scanner-hint{padding:0 38px!important;transform:translateY(30px)!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:48px!important;font-size:14px!important;}
}