/* Custom Tailwind configurations or additions can go here */

/* CropperJS Custom Overrides to match the "Geometric Balance" look */
.cropper-view-box,
.cropper-face {
  border-radius: 4px;
}

.cropper-line {
  background-color: transparent !important;
}

.cropper-point {
  background-color: #3b82f6 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  opacity: 1 !important;
}

.cropper-center {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
}

/* Custom indicator lines added via Script */
.cropper-center-guide-x::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #ef4444; /* red-500 */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.cropper-center-guide-y::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background-color: #ef4444; /* red-500 */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.cropper-modal {
  opacity: 0.6 !important;
  background-color: #0f172a !important; /* slate-900 */
}