/* ==========================================================================
   Photo Crop Modal — Drag-to-crop tool for profile photos and memory photos
   Used by PhotoCropModal.svelte
   ========================================================================== */

/* ── Overlay (extends .modal-overlay from modals.css) ───────────────────── */

.photo-crop-overlay {
	/* Ensure crop modal is above any existing modal content */
	z-index: calc(var(--sc-z-modal) + 10);
}

/* ── Modal sizing ────────────────────────────────────────────────────────── */

.photo-crop-modal {
	padding: var(--sc-space-lg);
	overflow: hidden; /* stage must not cause scroll */
}

/* ── Portrait hint ───────────────────────────────────────────────────────── */

.photo-crop-hint {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-secondary);
	background: var(--sc-accent-subtle);
	border-radius: var(--sc-radius-sm);
	padding: var(--sc-space-xs) var(--sc-space-sm);
	margin-bottom: var(--sc-space-md);
}

.photo-crop-hint svg {
	width: 14px;
	height: 14px;
	stroke: var(--sc-accent);
	flex-shrink: 0;
}

/* ── Stage wrapper (centers the image) ──────────────────────────────────── */

.photo-crop-stage-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--sc-space-md);
	/* Limit height so the modal stays within viewport */
	max-height: 55vh;
	overflow: hidden;
}

/* ── Stage (inline block that shrinks to exact image size) ──────────────── */

.photo-crop-stage {
	position: relative;
	display: inline-block;
	line-height: 0;
	/* No overflow:hidden — the handles extend beyond the crop rect's edges
	   but are positioned within the stage, which is sized to the image */
}

/* ── Image ───────────────────────────────────────────────────────────────── */

.photo-crop-img {
	display: block;
	max-width: 100%;
	max-height: 55vh;
	width: auto;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	/* Remove any default pointer cursor on the img itself */
	pointer-events: none;
}

/* ── SVG mask overlay ────────────────────────────────────────────────────── */

.photo-crop-mask {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

/* ── Draggable crop rectangle ────────────────────────────────────────────── */

.photo-crop-rect {
	position: absolute;
	cursor: move;
	touch-action: none;
	/* No visible border here — SVG handles the visual border */
}

.photo-crop-rect--dragging {
	cursor: grabbing;
}

/* ── Resize handles (corners) ────────────────────────────────────────────── */

.photo-crop-handle {
	position: absolute;
	width: 22px;
	height: 22px;
	background: white;
	border: 2px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--sc-radius-full);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	touch-action: none;
}

.photo-crop-handle--nw {
	top: -11px;
	left: -11px;
	cursor: nw-resize;
}

.photo-crop-handle--ne {
	top: -11px;
	right: -11px;
	cursor: ne-resize;
}

.photo-crop-handle--se {
	bottom: -11px;
	right: -11px;
	cursor: se-resize;
}

.photo-crop-handle--sw {
	bottom: -11px;
	left: -11px;
	cursor: sw-resize;
}

/* ── Loading state ───────────────────────────────────────────────────────── */

.photo-crop-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-tertiary);
}

/* ── Action buttons ──────────────────────────────────────────────────────── */

.photo-crop-actions {
	display: flex;
	gap: var(--sc-space-sm);
	justify-content: flex-end;
}