/* /includes/css/community_profile.css */
/* =========================================================
   Meet Profile Photos - Dropzone in-tile progress overlay
   ========================================================= */

.meet-photo-dropzone.dropzone{
  position: relative; /* ensure overlay can anchor */
}

/* Full-tile overlay */
.meet-photo-dzOverlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(2px);
}

/* Dark mode */
html.dark .meet-photo-dzOverlay{
  background: rgba(0,0,0,.55);
}

/* Center card inside overlay */
.meet-photo-dzOverlayCard{
  width: min(260px, 90%);
  border-radius: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  text-align: center;
}
html.dark .meet-photo-dzOverlayCard{
  background: rgba(20,22,25,.94);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

/* Progress + spinner */
.meet-photo-dzOverlayProgress{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.meet-photo-dzOverlayText{
  font-weight: 700;
  opacity: .85;
}

/* Retry button spacing */
.meet-photo-dzOverlayRetry{
  margin-top: 8px;
}

/* Ensure overlay doesn't break "Add photos" tile sizing */
.meet-photo-dropzone .dz-message{
  position: absolute;
  inset: 0;
}

/* Hide Dropzone default UI (red error labels / checkmarks / progress) in the Meet Photo tile */
#meetPhotoDropzone .dz-error-message,
#meetPhotoDropzone .dz-error-mark,
#meetPhotoDropzone .dz-success-mark,
#meetPhotoDropzone .dz-progress{
  display: none !important;
}

/* Keep tile border consistent even when Dropzone adds dz-error/dz-success classes */
#meetPhotoDropzone.dz-error,
#meetPhotoDropzone.dz-success,
#meetPhotoDropzone.dz-complete{
  border-color: rgba(0,0,0,.22) !important;
}