/* =====================================
   Gazolab - Image Trimming Tool (Crop) CSS
   • Shared styles: /assets/css/tool.css
   • Only write rules starting with .gz-tool-crop here
===================================== */

.gz-tool-crop {
  /* Add crop-specific overrides or tweaks here if needed */
}

/* Example: if you want to change the crop frame appearance
.gz-tool-crop .gz-crop-overlay {
  border-radius: 8px;
}
*/

/* crop */
.gz-crop-preview {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.gz-crop-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  max-width: 100%;
  /* Treat all finger swipes inside as drag interactions */
  touch-action: none;
}

.gz-crop-image {
  display: block;
  width: 100%;
  height: auto;

  /* Disable native image dragging & selection */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Allow clicks/touches inside the frame */
.gz-crop-overlay {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.gz-settings-label-inline {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 1.0rem;
  cursor: pointer;
}

.gz-settings-label-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* Make handles slightly larger for easier hit targets */
.gz-crop-handle {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  position: absolute;
}

.gz-crop-handle-nw { top: -7px;  left: -7px;  cursor: nwse-resize; }
.gz-crop-handle-ne { top: -7px;  right: -7px; cursor: nesw-resize; }
.gz-crop-handle-sw { bottom: -7px; left: -7px;  cursor: nesw-resize; }
.gz-crop-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }

/* On mobile, hide handles (pinch gestures are primary) */
@media (max-width: 768px) {
  .gz-crop-handle {
    display: none;
  }
}

/* live preview */
.gz-live-preview-card {
  margin-top: 1.5rem;
}

.gz-live-preview-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #141414;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
}

.gz-live-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.gz-crop-container,
.gz-crop-overlay,
.gz-crop-handle {
  touch-action: none;
}

.gz-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* Settings card */
.gz-settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.gz-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gz-settings-label {
  font-size: 0.95rem;
  font-weight: 500;
}

.gz-settings-control {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gz-settings-control input[type="range"] {
  flex: 1;
}

.gz-settings-control input[type=range]{
  touch-action: pan-y;
}

.gz-settings-value {
  min-width: 2.5rem;
  text-align: right;
  font-size: 0.9rem;
  color: #374151;
}

/* Stats + Download */
.gz-stats-row {
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  gap: 5rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
    .gz-stats-row {
  gap: 1rem;
}}

.gz-stats-text {
  color: #4b5563;
}