/* Basic styling for the Mizics plugin */

.mizics-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  color: #333;
}

.mizics-container h2,
.mizics-container h3 {
  color: #b5651d; /* Warm bronze color */
  margin-bottom: 10px;
}

.mizics-upload-section {
  margin-bottom: 20px;
}

.mizics-upload-section p {
  font-size: 16px;
  margin-bottom: 10px;
}

.mizics-upload-section input[type="file"] {
  margin-bottom: 10px;
}

#mizics-video {
  max-width: 100%;
  margin-bottom: 10px;
}

#mizics-canvas {
  display: none;
}

#mizics-results {
  margin-top: 20px;
}

.mizics-index {
  margin-bottom: 20px;
}

#mizics-action-buttons,
#mizics-download-prompt,
#mizics-thankyou {
  margin-top: 15px;
}


/* Mizics v21.1.0 – Facial analysis mask (toggleable) */
#mizics-face-mask {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      transparent 0%,
      transparent 46%,
      rgba(0,0,0,0.55) 52%,
      rgba(0,0,0,0.7) 100%);
  z-index:10;
}


/* Mizics v21.1.1 – Video wrapper + facial analysis mask */
#mizics-video-wrap{
  position:relative;
  display:inline-block;
}
#mizics-face-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      transparent 0%,
      transparent 46%,
      rgba(0,0,0,0.55) 52%,
      rgba(0,0,0,0.7) 100%);
  z-index:10;
}