/* image-crop.css — modal for js/image-crop.js */
.imgcrop-overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 20, .78);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.imgcrop-overlay.imgcrop-open { display: flex; }
.imgcrop-box {
  background: #0d1526; border: 1px solid #26314a; border-radius: 14px;
  padding: 18px; max-width: 92vw; max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.imgcrop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.imgcrop-title { color: #fff; margin: 0; font-size: 17px; font-weight: 700; }
.imgcrop-rotate {
  background: #182238; border: 1px solid #3a4666; color: #fff;
  border-radius: 8px; width: 40px; height: 40px; font-size: 18px;
  line-height: 1; cursor: pointer; flex-shrink: 0;
}
.imgcrop-rotate:hover { background: #22304f; }
.imgcrop-canvas-wrap {
  position: relative; border: 2px dashed #3a4666; border-radius: 8px; overflow: hidden;
  display: inline-block; line-height: 0; background: #060a14;
}
.imgcrop-canvas { display: block; cursor: grab; touch-action: none; }
.imgcrop-canvas:active { cursor: grabbing; }
/* Rule-of-thirds guide, purely visual, never intercepts drag/touch. */
.imgcrop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 33.34% 100%, 66.67% 100%, 100% 33.34%, 100% 66.67%;
  background-repeat: no-repeat;
  background-position: 33.34% 0, 66.67% 0, 0 33.34%, 0 66.67%;
}
.imgcrop-zoom-label {
  display: flex; align-items: center; gap: 10px; color: #b7c2dd;
  font-size: 13px; margin-top: 14px;
}
.imgcrop-zoom { flex: 1; min-width: 0; height: 32px; }
.imgcrop-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.imgcrop-cancel, .imgcrop-use {
  border: none; border-radius: 8px; padding: 12px 20px; font-weight: 700;
  font-size: 14px; cursor: pointer; min-height: 44px; /* touch-friendly */
}
.imgcrop-cancel { background: transparent; color: #b7c2dd; border: 1px solid #3a4666; }
.imgcrop-cancel:hover { background: #182238; }
.imgcrop-use { background: #f5c518; color: #1a1400; }
.imgcrop-use:hover { background: #ffd23d; }

@media (max-width: 480px) {
  .imgcrop-box { padding: 14px; border-radius: 10px; }
  .imgcrop-actions { justify-content: stretch; }
  .imgcrop-cancel, .imgcrop-use { flex: 1; }
}