/* QR Scanner Styles - Include this CSS file when using the QR scanner component */

/* Ensure QR video is visible and sized correctly */
#qrReader { 
  width: 300px; 
  height: 300px; 
  max-width: 300px; 
  max-height: 300px; 
  background: #000; 
  border-radius: 8px; 
  position: relative; 
  overflow: hidden; 
}

#qrReader video { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: cover; 
  display: block; 
  background: #000; 
  border-radius: 8px; 
}

#qrReader img, 
#qrReader canvas { 
  max-width: 100%; 
}

#qrReader::after { 
  content: 'Align QR within the frame'; 
  position: absolute; 
  bottom: 8px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: #fff; 
  font-size: 12px; 
  opacity: .7; 
}

#qrSheet .camera-actions { 
  position: sticky; 
  bottom: 0; 
  background: #fff; 
  padding: .5rem; 
  border-top: 1px solid rgba(0,0,0,0.07); 
}