@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "CPN";
  src: url("./fonts/CPN-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

body {
  font-family: "CPN", sans-serif;
  text-align: center;
  color: #fff;
  padding: 3rem 1.5rem !important;
}

.pin-box {
  width: 50px;
  height: 50px;
  border: 2px solid #555;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  background-color: #222;
  color: #fff;
  transition: all 0.2s ease;
}

#reader {
  border: none !important;
}
#reader__dashboard_section {
  padding: 0 !important;
}
#html5-qrcode-button-camera-stop {
  display: none !important;
}
#reader video {
  transform: scaleX(-1);
  /* Optional: smooth flipping */
  backface-visibility: hidden;
}