/* ============================================================
   WIS Document Scanner — estilos
   Paleta alinhada com o site (ciano #00B9CC / #0097AB)
   ============================================================ */
:root{
  --ws-scan-primary:#00B9CC;
  --ws-scan-primary-dark:#0097AB;
  --ws-scan-bg:#0b1220;
}

/* Botão "Digitalizar" injetado ao lado de cada input[type=file] */
.ws-scan-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:24px;
  margin-top:6px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,var(--ws-scan-primary),var(--ws-scan-primary-dark));
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ws-scan-trigger:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,185,204,.35); }
.ws-scan-trigger:active{ transform:translateY(0); }
.ws-scan-trigger svg{ width:14px; height:14px; }

.ws-scan-status{
  display:block;
  margin-left:24px;
  margin-top:4px;
  font-size:12px;
  color:#0097AB;
  font-weight:600;
}
.ws-scan-status.empty{ display:none; }

/* Overlay / Modal */
.ws-scan-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(4,10,20,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
}
.ws-scan-overlay.active{ display:flex; }

.ws-scan-modal{
  width:100%; max-width:560px; max-height:94vh;
  background:#0f1a2b;
  border-radius:16px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}

.ws-scan-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:rgba(0,185,204,.08);
  border-bottom:1px solid rgba(0,185,204,.18);
}
.ws-scan-header h3{ margin:0; font-size:15px; color:#fff; font-weight:700; }
.ws-scan-header small{ color:#7fb9c4; font-size:12px; }
.ws-scan-close{
  background:none; border:none; color:#cfe9ee; font-size:20px;
  cursor:pointer; line-height:1; padding:4px;
}

.ws-scan-camera-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 16px;
  background:rgba(0,185,204,.06);
  border-bottom:1px solid rgba(0,185,204,.12);
}
.ws-scan-cam-label{ font-size:12px; color:#7fb9c4; font-weight:600; }
.ws-scan-cam-select{
  flex:1; max-width:260px;
  padding:6px 8px; font-size:12.5px;
  background:#0b1524; color:#e6f7fa;
  border:1px solid rgba(0,185,204,.3); border-radius:8px;
}
.ws-scan-cam-btn{
  padding:7px 12px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.08); color:#e6f7fa;
  border:1px solid rgba(0,185,204,.3); border-radius:8px; cursor:pointer;
}
.ws-scan-cam-btn:hover{ background:rgba(255,255,255,.14); }

.ws-scan-stage{
  position:relative;
  background:#000;
  min-height:280px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ws-scan-stage video,
.ws-scan-stage canvas{
  max-width:100%;
  max-height:60vh;
  display:block;
}
.ws-scan-stage video{ object-fit:contain; }

.ws-scan-guide{
  position:absolute; inset:0; pointer-events:none;
  border:2px dashed rgba(0,217,239,.55);
  margin:8%;
  border-radius:8px;
}

.ws-scan-crop-wrap{ position:relative; display:inline-block; }
.ws-scan-crop-wrap canvas.ws-scan-photo{ display:block; }
.ws-scan-handle{
  position:absolute; width:22px; height:22px; margin:-11px;
  border-radius:50%;
  background:var(--ws-scan-primary);
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  cursor:grab; touch-action:none;
}
.ws-scan-handle:active{ cursor:grabbing; }

.ws-scan-thumbs{
  display:flex; gap:8px; padding:10px 16px; overflow-x:auto;
  background:#0b1524;
}
.ws-scan-thumbs img{
  width:52px; height:70px; object-fit:cover;
  border-radius:6px; border:2px solid rgba(0,185,204,.4);
}

.ws-scan-filters{
  display:flex; gap:8px; padding:0 16px 12px;
}
.ws-scan-filter-btn{
  flex:1; padding:8px 6px; font-size:12px; font-weight:600;
  border-radius:8px; border:1px solid rgba(0,185,204,.35);
  background:transparent; color:#cfe9ee; cursor:pointer;
}
.ws-scan-filter-btn.active{
  background:var(--ws-scan-primary); color:#04202a; border-color:var(--ws-scan-primary);
}

.ws-scan-footer{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:14px 16px 18px;
  border-top:1px solid rgba(0,185,204,.15);
}
.ws-scan-btn{
  flex:1; min-width:120px;
  padding:11px 14px; font-size:13px; font-weight:700;
  border-radius:10px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.ws-scan-btn.primary{ background:linear-gradient(135deg,var(--ws-scan-primary),var(--ws-scan-primary-dark)); color:#fff; }
.ws-scan-btn.ghost{ background:rgba(255,255,255,.08); color:#e6f7fa; }
.ws-scan-btn.subtle{ background:transparent; color:#7fb9c4; border:1px solid rgba(0,185,204,.3); }
.ws-scan-btn:disabled{ opacity:.5; cursor:not-allowed; }

.ws-scan-hint{
  padding:0 16px 10px; font-size:12px; color:#7fb9c4;
}