/* ===================================================
   CHECK-IN SCANNER — VOGA eventos
   Mobile-first, full-screen scanner de QR code
   =================================================== */

/* ---- OVERLAY FULL-SCREEN ---- */
.checkin-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.checkin-overlay.open {
  transform: translateY(0);
}

/* ---- VÍDEO (fundo) ---- */
#checkinVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#checkinCanvas { display: none; }

/* ---- HEADER ---- */
.checkin-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
}

.checkin-close-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.checkin-close-btn:hover { background: rgba(255,255,255,0.25); }

.checkin-header-center {
  text-align: center;
  flex: 1;
  padding: 0 .5rem;
}
.checkin-event-label {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  display: block;
}
.checkin-event-name {
  font-size: .9rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 180px;
  margin: 0 auto;
}

/* ---- CONTADOR DE VALIDADOS ---- */
.checkin-stats-pill {
  position: absolute;
  top: calc(70px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: .3rem .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.75);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.checkin-count-num {
  color: #22c55e;
  font-weight: 800;
  font-size: .88rem;
}

/* ---- FRAME DE ESCANEAMENTO ---- */
.checkin-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.checkin-frame-box {
  width: 240px;
  height: 240px;
  position: relative;
  /* Escurece tudo ao redor */
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  border-radius: 4px;
}

/* Cantos verdes */
.checkin-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: #22c55e;
  border-style: solid;
  border-width: 0;
}
.checkin-corner.tl { top: -1px; left: -1px;  border-top-width: 3px; border-left-width: 3px;  border-radius: 5px 0 0 0; }
.checkin-corner.tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 5px 0 0; }
.checkin-corner.bl { bottom: -1px; left: -1px;  border-bottom-width: 3px; border-left-width: 3px;  border-radius: 0 0 0 5px; }
.checkin-corner.br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 5px 0; }

/* Linha de scan animada */
.checkin-scan-line {
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: linear-gradient(to right, transparent, #22c55e 30%, #34d399 50%, #22c55e 70%, transparent);
  border-radius: 2px;
  animation: scanMove 2.2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34,197,94,.7);
}
@keyframes scanMove {
  0%   { top: 8px;  opacity: .9; }
  48%  { top: calc(100% - 8px); opacity: .9; }
  50%  { opacity: 0; }
  52%  { top: 8px;  opacity: 0; }
  54%  { opacity: .9; }
  100% { top: calc(100% - 8px); opacity: .9; }
}

/* Dica de texto */
.checkin-hint {
  position: absolute;
  bottom: calc(18% + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  pointer-events: none;
  z-index: 5;
  padding: 0 2rem;
}

/* ---- PAINEL DE RESULTADO ---- */
.checkin-result {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  padding: 1.6rem 1.6rem;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  text-align: center;
}
.checkin-result.show { transform: translateY(0); }

/* Cores por tipo */
.checkin-result.valid   { background: linear-gradient(160deg, #052e16 0%, #064e3b 100%); }
.checkin-result.invalid { background: linear-gradient(160deg, #450a0a 0%, #7f1d1d 100%); }
.checkin-result.used    { background: linear-gradient(160deg, #1c1917 0%, #292524 100%); }

.checkin-result-emoji {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: .2rem;
}
.checkin-result-status {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
}
.checkin-result-name {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.checkin-result-detail {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}
.checkin-result-bar {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.2);
  margin-top: .4rem;
}

/* ---- ERRO DE CÂMERA ---- */
.checkin-cam-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
  background: #111;
  text-align: center;
  padding: 2rem;
}
.checkin-cam-error svg { color: rgba(255,255,255,.3); }
.checkin-cam-error p { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.5; }
.checkin-cam-error strong { color: #fff; display: block; font-size: 1rem; margin-bottom: .3rem; }

/* ---- BOTÃO CHECK-IN no painel ---- */
.pt-btn-checkin {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .7rem;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: rgba(34,197,94,.12);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.3);
  transition: background .15s, color .15s;
}
.pt-btn-checkin:hover { background: rgba(34,197,94,.22); color: #15803d; }