/* ==========================================================
   Image Crop Online – Tool-only styles (no global overrides)
   ========================================================== */
#stage { position: relative; }

.image-crop-page .tool-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.image-crop-page .help-ico{
  width:28px;height:28px;
  border:1px solid #d0d7de;
  background:#fff;
  border-radius:999px;
  cursor:pointer;
}
.image-crop-page .help-ico:hover{ background:#f1f5f9; }

.image-crop-page .rk-bullets{
  margin: 0 0 12px 18px;
  padding: 0;
}
.image-crop-page .rk-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.image-crop-page .hint{ opacity:.85; }

.image-crop-page .meta-bar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f8fafc;
}
.image-crop-page .hide{ display:none !important; }

/* Section grid like RedKetchup */
.image-crop-page .rk-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-bottom:14px;
}
.image-crop-page .rk-col{ min-width:0; }
.image-crop-page .rk-subhead{
  font-size:14px;
  font-weight:700;
  margin: 0 0 8px;
  opacity:.9;
}
.image-crop-page .rk-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:12px;
}
.image-crop-page .rk-row-tight{
  align-items:center;
}
.image-crop-page .rk-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 140px;
}
.image-crop-page .rk-inline{
  display:flex;
  align-items:center;
  gap:8px;
}

.image-crop-page .rk-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 2px 0 12px;
}

.image-crop-page .rk-iconbar{ display:flex; gap:8px; }
.image-crop-page .icon-btn{
  width:38px;height:34px;
  border:1px solid #d0d7de;
  background:#fff;
  border-radius:8px;
  cursor:pointer;
}
.image-crop-page .icon-btn:hover{ background:#f1f5f9; }

/* Preview area should be ABOVE controls feeling */
.image-crop-page .preview-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  padding:12px;
}
.image-crop-page .preview-hint{
  margin-top:8px;
  opacity:.85;
}


/* Grid style while perspective crop-box */
.grid-lines {
  pointer-events: none;
}

.crop-box.grid-transparent .grid-lines {
  opacity: 0;
}


/* Canvas stage */
.canvas-stage {
  width: 100%;
  max-width: 820px;
  height: 480px;          /* ✅ FIXED */
  margin: 0 auto;
  position: relative;
  background: #f5f7fa;
  overflow: hidden;
  border-radius: 12px;
}

#canvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ KEY */
  display: block;
}


.image-crop-page .canvas-stage{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;

  max-width: 820px;      /* smaller than before */
  margin: 0 auto 14px;   /* space before controls */
  width: 100%;

  min-height: 280px;     /* fits in one frame */
}

/* Ensure controls feel secondary to the image */
.image-crop-page .rk-grid{
  margin-top: 16px;
}

.image-crop-page .file-size-box{
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  font-weight: 600;
}


.image-crop-page #canvas{
  display:block;
  width:100%;
  height:auto;
}

/* Overlay sits ABOVE canvas */
.image-crop-page .overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

/* Dim masks (4 pieces) */
.image-crop-page .mask{
  position:absolute;
  background: rgba(0,0,0,.45);
}
.image-crop-page .mask-top{ left:0; top:0; width:100%; height:0; }
.image-crop-page .mask-left{ left:0; top:0; width:0; height:0; }
.image-crop-page .mask-right{ right:0; top:0; width:0; height:0; }
.image-crop-page .mask-bottom{ left:0; bottom:0; width:100%; height:0; }

/* Crop box interactive */
.image-crop-page .crop-box{
  position:absolute;
  border:2px solid #2563eb;
  box-sizing:border-box;
  pointer-events:auto;
  background: transparent;
}
.image-crop-page .crop-box:focus{ outline:none; }

/* Grid lines (rule of thirds) */
.image-crop-page .grid-lines{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.image-crop-page .grid-lines .g{
  position:absolute;
  background: rgba(255,255,255,.7);
}
.image-crop-page .grid-lines .v1{ top:0; bottom:0; width:1px; left:33.333%; }
.image-crop-page .grid-lines .v2{ top:0; bottom:0; width:1px; left:66.666%; }
.image-crop-page .grid-lines .h1{ left:0; right:0; height:1px; top:33.333%; }
.image-crop-page .grid-lines .h2{ left:0; right:0; height:1px; top:66.666%; }

.image-crop-page .crop-box.show-grid .grid-lines{ display:block; }

/* Handles */
.image-crop-page .handle{
  position:absolute;
  width:10px; height:10px;
  background:#fff;
  border:1px solid #111;
  border-radius:2px;
  box-sizing:border-box;
}
.image-crop-page .handle.nw{ left:-6px; top:-6px; cursor:nwse-resize; }
.image-crop-page .handle.ne{ right:-6px; top:-6px; cursor:nesw-resize; }
.image-crop-page .handle.sw{ left:-6px; bottom:-6px; cursor:nesw-resize; }
.image-crop-page .handle.se{ right:-6px; bottom:-6px; cursor:nwse-resize; }

.image-crop-page .handle.n{ left:50%; top:-6px; transform:translateX(-50%); cursor:ns-resize; }
.image-crop-page .handle.s{ left:50%; bottom:-6px; transform:translateX(-50%); cursor:ns-resize; }
.image-crop-page .handle.e{ right:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.image-crop-page .handle.w{ left:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

/* Responsive */
@media (max-width: 900px){
  .image-crop-page .rk-grid{ grid-template-columns: 1fr; }
  .image-crop-page .canvas-stage{ min-height: 280px; }
}

.image-crop-page .canvas-stage {
  min-height: 300px;
}
/* Disable native scrolling / zooming on crop area */
#overlay,
#cropBox,
#cropBox * {
  touch-action: none !important;
}