/* ==============================
   FLOWPESA — Verify ID Front
   (scoped, responsive, no bleed)
   ============================== */

.idv-front-screen{
  background:#111;
  color:#f8f9fa;
  min-height:100dvh;
  padding: calc(72px + 16px) 16px calc(24px + env(safe-area-inset-bottom));
}

/* keep your shared topbar fluid */
.idv-front-screen .top-bar{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:50; background:transparent;
}
.idv-front-screen .top{
  width:100%; max-width:520px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.idv-front-screen .back-btn{
  width:40px; height:40px; border:0; border-radius:999px;
  background:#202124; color:#f8f9fa; display:grid; place-items:center;
}
.idv-front-screen .top-title{
  font:600 18px/24px Inter,system-ui,sans-serif; margin:0; text-align:center;
}
.idv-front-screen .top-ghost{ width:40px; height:40px; }

/* content column */
.idv-front-screen .content{
  width:100%; max-width:520px; margin:0 auto;
}

.idv-front-screen .heading{
  font:700 clamp(22px,6vw,30px)/1.2 Inter,system-ui,sans-serif;
  margin:0 0 6px;
}
.idv-front-screen .subheading{
  color:#c9c9c9; font:400 clamp(14px,3.8vw,16px)/1.45 Inter,system-ui,sans-serif;
  margin:0 0 14px;
}

/* camera card responsive */
.idv-front-screen .cam-card{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:#0e1012;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  aspect-ratio: 16 / 10;
}

/* video + preview share same box */
.idv-front-screen #idv-video,
.idv-front-screen #idv-preview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.idv-front-screen .cam-frame{
  position:absolute; inset:10px;
  border-radius:12px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.75);
  pointer-events:none;
}

.idv-front-screen .cam-fallback{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,0.35);
  font:500 14px/1.3 Inter,system-ui,sans-serif;
  color:#f8f9fa;
  padding:16px; text-align:center;
}

/* controls row */
.idv-front-screen .cam-controls{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.idv-front-screen .ghost-pill{
  width:56px; height:56px; border-radius:16px;
  background:#17181b; color:#e9eaec;
  border:0; display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  cursor:pointer; font-size:20px;
}

.idv-front-screen .shutter{
  width:74px; height:74px; border-radius:999px;
  background:#fff; border:6px solid #1a1a1a;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  cursor:pointer;
}

/* continue button */
.idv-front-screen .btn-primary{
  width:100%;
  height:56px;
  margin-top:16px;
  border-radius:16px;
  border:0;
  background:#b7d8fd;
  color:#2b2b2b;
  font:600 16px/1 Inter,system-ui,sans-serif;
  cursor:not-allowed;
  transition:transform .1s ease, background .15s ease;
}
.idv-front-screen .btn-primary.is-active,
.idv-front-screen .btn-primary:not([disabled]){
  background:#1682f9; color:#fff; cursor:pointer;
}
.idv-front-screen .btn-primary:active{ transform:scale(.98); }

.idv-front-screen .error{
  margin-top:10px; color:#ff6b6b;
  font:400 14px/1.3 Inter,system-ui,sans-serif;
}

/* small phones tighten */
@media (max-width:360px){
  .idv-front-screen{ padding-inline:12px; }
  .idv-front-screen .ghost-pill{ width:52px; height:52px; }
  .idv-front-screen .shutter{ width:68px; height:68px; }
}
