.dropzone {
  border: 2px dashed #d1d5db !important;
  border-radius: 1em;
  text-align: start;
}

.dropzone .dz-image-preview {
  z-index: 1 !important;
}

.dz-preview .dz-details {
  display: none;
}

/* Ensure background matches theme */
.dropzone .dz-preview.dz-image-preview {
  background: white !important;
}

.dark .dropzone {
  border-color: #4b5563 !important;
}

.dark .dropzone .dz-preview.dz-image-preview {
  background: black !important;
}

/* Show the file details on hover */
.dz-preview:hover .dz-details {
  display: block;
}

/* Hide progress bar when upload is complete or successful */
.dz-preview.dz-complete .dz-progress,
.dz-preview.dz-success .dz-progress {
  display: none !important;
}

/* Style the dropzone message text */
.dropzone .dz-message {
  color: black;
}

.dark .dropzone .dz-message {
  color: white;
}

/* Style specific message elements */
.dropzone .dropzone-msg-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: black;
}

.dark .dropzone .dropzone-msg-title {
  color: white;
}

.dropzone .dropzone-msg-desc {
  font-size: 0.875rem;
  color: black;
  opacity: 0.7;
}

.dark .dropzone .dropzone-msg-desc {
  color: white;
  opacity: 0.7;
}

/* Style the remove link */
.dropzone .dz-remove {
  color: #ef4444;
  text-decoration: underline;
}

.dark .dropzone .dz-remove {
  color: #f87171;
}

/* @media (max-width: 600px) { */
/*   .dz-image { */
/*     max-width: 6em; */
/*     max-height: 6em; */
/*   } */
/* } */