/* @mosip/inji-verify-angularjs — default styles for directives */

.inji-ovp-container,
.inji-scanner-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.inji-scanner-ui { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }

.inji-state-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px; border-radius: 12px; background: #f8f9fa;
  border: 1px solid #e9ecef; min-width: 260px;
}

.inji-qr-card { background: #fff; }
.inji-qr-label { font-weight: 600; color: #333; margin: 0; }
.inji-qr-hint { color: #888; font-size: 13px; margin: 0; }
.inji-qr-canvas { border-radius: 8px; }

.inji-result-icon { font-size: 48px; margin: 0; }
.inji-result-text { font-weight: 500; margin: 0; text-align: center; }

.inji-success-card { background: #d4edda; border-color: #c3e6cb; }
.inji-error-card { background: #f8d7da; border-color: #f5c6cb; }
.inji-expired-card { background: #fff3cd; border-color: #ffeeba; }

.inji-btn {
  padding: 10px 20px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.inji-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inji-btn-primary { background: #4a6cf7; color: #fff; }
.inji-btn-primary:hover:not(:disabled) {
  background: #3b5de7; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
}
.inji-btn-secondary { background: #e9ecef; color: #333; }
.inji-btn-secondary:hover:not(:disabled) { background: #dee2e6; }

.inji-camera-section { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.inji-video-wrapper {
  width: 320px; height: 240px; border-radius: 12px; overflow: hidden;
  background: #1a1a2e; position: relative; border: 2px solid #e9ecef;
}
.inji-video-wrapper.active { border-color: #28a745; }
.inji-video-el { width: 100%; height: 100%; object-fit: cover; }
.inji-video-placeholder {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #888;
}

.inji-upload-section {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px; border-radius: 12px; background: #f8f9fa;
  border: 1px dashed #ccc; width: 100%; max-width: 360px;
}
.inji-upload-label { font-size: 13px; color: #666; text-align: center; margin: 0; }
.inji-upload-input { font-size: 13px; }
.inji-upload-progress { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; }

.inji-spinner {
  width: 32px; height: 32px; border: 3px solid #e9ecef;
  border-top-color: #4a6cf7; border-radius: 50%;
  animation: inji-spin 0.7s linear infinite;
}
.inji-spinner-small { width: 16px; height: 16px; border-width: 2px; }
@keyframes inji-spin { to { transform: rotate(360deg); } }