.image-crop-modal .modal-dialog {
  max-width: min(96vw, 720px);
}

.image-crop-modal .modal-body {
  padding: 0.75rem;
  background: #f8f9fa;
}

.image-crop-stage {
  width: 100%;
  height: 400px;
  max-height: 60vh;
  min-height: 280px;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 10px;
  position: relative;
}

.image-crop-stage .image-crop-target {
  display: block;
  max-width: 100%;
}

.image-crop-stage .cropper-container {
  width: 100% !important;
  height: 100% !important;
}

.image-crop-stage .cropper-canvas,
.image-crop-stage .cropper-drag-box,
.image-crop-stage .cropper-crop-box,
.image-crop-stage .cropper-view-box {
  max-width: none;
}

.image-crop-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.35);
}

.image-crop-loading[hidden] {
  display: none !important;
}

.image-crop-hint {
  font-size: 0.8125rem;
  color: #495057;
  margin-top: 0.65rem;
}

.image-crop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.image-crop-toolbar .btn {
  font-size: 0.8125rem;
}

.image-crop-modal .modal-footer .btn-primary {
  background-color: #0f2847;
  border-color: #0f2847;
}

.image-crop-modal .modal-footer .btn-primary:hover {
  background-color: #163a63;
  border-color: #163a63;
}