/* cropper-theme.css */
:root { --crop-accent: #2563eb; }           /* default blue */

.cropper-modal .cropper-view-box{
  outline: 2px dotted var(--crop-accent);
  outline-offset: -2px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}
.cropper-modal .cropper-line,
.cropper-modal .cropper-point,
.cropper-modal .cropper-dashed{
  border-color: var(--crop-accent) !important;
  background-color: var(--crop-accent) !important;
}

/* Pin layout so only the image area scrolls; footer never "falls" */
.cropper-modal .modal-dialog { height: 92vh; max-height: 92vh; }
.cropper-modal .modal-content{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header | body | footer */
}
.cropper-modal .modal-body{ min-height: 0; overflow: auto; }
.cropper-modal .modal-footer{
  position: sticky; bottom: 0; background:#fff; z-index:2;
}

/* color themes */
.cropper-modal.crop-theme--blue  { --crop-accent: #2563eb; }
.cropper-modal.crop-theme--white { --crop-accent: #ffffff; }

/* React Easy Crop specific styling */
.cropper-modal .reactEasyCrop_Container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cropper-modal .reactEasyCrop_CropArea {
  outline: 2px dotted var(--crop-accent);
  outline-offset: -2px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}

.cropper-modal .reactEasyCrop_CropAreaRound {
  outline: 2px dotted var(--crop-accent);
  outline-offset: -2px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}

/* Improved grid lines */
.cropper-modal .reactEasyCrop_CropAreaGrid::before {
  border-color: var(--crop-accent) !important;
  opacity: 0.4;
}

.cropper-modal .reactEasyCrop_CropAreaGrid::after {
  border-color: var(--crop-accent) !important;  
  opacity: 0.4;
}