/* quickcrop — pixel-quiet default theme. Override via the --qc-* variables. */

:root {
  --qc-surface: #f7f2ea;
  --qc-surface-hover: #efe7d8;
  --qc-border: #cdbfa6;
  --qc-text: #2b241b;
  --qc-text-hover: #463c2e;
  --qc-on-dark: #efe7d8;
  --qc-overlay: rgba(43, 36, 27, .6);
  --qc-dim: rgba(0, 0, 0, .55);
  --qc-radius: 8px;
  --qc-crop-line: #fff;
  --qc-font: ui-sans-serif, system-ui, sans-serif;
}

/* presence probe: quickcrop.js skips CSS injection when this rule applies */
.qc-css-probe { position: absolute; }

/* ---- built-in modal ---- */
.qc-backdrop {
  position: fixed;
  inset: 0;
  background: var(--qc-overlay);
  display: grid;
  place-items: center;
  z-index: 1000;
  animation: qc-fade .15s ease;
}
@keyframes qc-fade { from { opacity: 0 } }

.qc-modal {
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  padding: 16px;
  max-width: 92vw;
  font-family: var(--qc-font);
}

.qc-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.qc-btn {
  font: inherit;
  font-family: var(--qc-font);
  font-size: .85rem;
  padding: .3rem .75rem;
  border: 1px solid var(--qc-border);
  border-radius: 6px;
  background: var(--qc-surface);
  color: var(--qc-text);
  cursor: pointer;
}
.qc-btn:hover { background: var(--qc-surface-hover); }

.qc-btn-primary {
  background: var(--qc-text);
  border-color: var(--qc-text);
  color: var(--qc-on-dark);
  font-weight: 600;
}
.qc-btn-primary:hover {
  background: var(--qc-text-hover);
  border-color: var(--qc-text-hover);
}

/* ---- crop stage (shared by every modal host) ---- */
.qc-stage {
  position: relative;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* let pointer events own the gestures */
}
.qc-stage img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

/* dims the image outside the crop box; the hole is a clip-path set by render() */
.qc-dim {
  position: absolute;
  inset: 0;
  background: var(--qc-dim);
  pointer-events: none;
}

.qc-box {
  position: absolute;
  cursor: move;
  outline: 1px solid var(--qc-crop-line);
  background:
    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 0 33.33%/100% 1px no-repeat,
    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 0 66.66%/100% 1px no-repeat,
    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 33.33% 0/1px 100% no-repeat,
    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 66.66% 0/1px 100% no-repeat; /* rule-of-thirds */
  background-blend-mode: overlay;
}

/* 14px visual square inside a 28px touch target: the transparent border
   widens the hit area for fingers without changing the look */
.qc-handle {
  position: absolute;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 7px solid transparent;
  background: var(--qc-crop-line);
  background-clip: padding-box;
  border-radius: 9px; /* reads as 2px on the visible square after the border */
}
.qc-nw { left: -14px; top: -14px; cursor: nwse-resize; }
.qc-ne { right: -14px; top: -14px; cursor: nesw-resize; }
.qc-sw { left: -14px; bottom: -14px; cursor: nesw-resize; }
.qc-se { right: -14px; bottom: -14px; cursor: nwse-resize; }

/* mount point inside a host modal (e.g. themodal) */
.qc-mount { line-height: 0; }