/* Main Uploader Container */
.jetflow-uploader {
  position: relative;
  background-color: #1A202C; /* Dark background */
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #2D3748;
}

/* Hide the original file input, we will trigger it via JS */
.jetflow-uploader + .jet-form-builder__field[type="file"] {
  display: none;
}

/* Drop Zone (Empty State) */
.jetflow-dropzone {
  border: 2px dashed #4A5568;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  color: #A0AEC0;
}
.jetflow-dropzone.is-dragover,
.jetflow-dropzone:hover {
  background-color: #2D3748;
  border-color: #718096;
}
.jetflow-dropzone-text {
  font-size: 16px;
}
.jetflow-dropzone-text strong {
  color: #4299E1; /* Accent color */
}
.jetflow-dropzone-limits {
  font-size: 12px;
  color: #718096;
  margin-top: 8px;
}

/* Grid & Tiles */
.jfb-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.jfb-preview-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #2D3748;
}
.jfb-preview-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  transition: opacity 0.2s;
}
.jfb-tile-action-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.jfb-tile-action-remove svg {
  width: 16px;
  height: 16px;
  fill: white;
}
.jfb-preview-tile:hover .jfb-tile-action-remove {
  opacity: 1;
}

/* Individual Tile Progress Bar */
.jfb-progress-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: #38A169; /* Green for success */
  transition: width 0.2s;
  z-index: 5;
}
.jfb-preview-tile.jfb-done .jfb-progress-bar {
  opacity: 0;
}

/* Tile States */
.jfb-error-msg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #E53E3E;
  color: white;
  font-size: 11px;
  padding: 4px;
  text-align: center;
  z-index: 6;
}
.jfb-preview-tile.has-error .jfb-preview-img {
  filter: grayscale(80%);
  opacity: 0.5;
}
.jfb-preview-tile.jfb-retrying .jfb-preview-img {
  opacity: 0.7;
}
.jfb-preview-tile.jfb-retrying .jfb-progress-bar {
  background-color: #f39c12; /* Orange for retrying */
  animation: jfb-pulse 1.5s infinite;
}
@keyframes jfb-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}