.planty-image-dropzone {
  position: relative;
  border: 2px dashed var(--md3-outline-variant, #cac4d0);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  background-color: var(--md3-elevation-1, #f7f2fa);
  margin-bottom: 1.5rem;
}

.planty-image-dropzone:hover,
.planty-image-dropzone.is-dragover {
  background-color: var(--md3-elevation-2, #f3edf7);
  border-color: var(--md3-primary, #6750a4);
}

.planty-image-dropzone .dropzone-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--md3-on-surface-variant, #49454f);
}

.planty-image-dropzone .dropzone-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--md3-primary, #6750a4);
  stroke-width: 1.5;
}

.planty-image-dropzone .dropzone-text {
  font-size: 1rem;
  font-weight: 500;
}

/* For empty dropzone (file upload box): stretch inputs over dropzone invisibly */
.planty-image-dropzone:not(.has-preview) .dropzone-inputs,
.planty-image-dropzone.is-empty .dropzone-inputs {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.planty-image-dropzone input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

/* For cards with preview: show inputs container (alt-text) */
.planty-image-dropzone.has-preview .dropzone-inputs {
  position: static;
  opacity: 1;
  overflow: visible;
  z-index: 1;
  pointer-events: auto;
  margin-top: 0.5rem;
}



.planty-image-dropzone.has-preview .dropzone-visual {
  display: none;
}

.planty-image-dropzone .dropzone-preview-container {
  display: flex;
  justify-content: center;
}

.planty-image-dropzone .dropzone-preview-container img {
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.planty-image-dropzone.has-preview:hover::after {
  content: "Klicken oder neues Foto ziehen zum Ändern";
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  pointer-events: none;
}