/* Photo engraving — crop / zoom / rotate editor.
   The editor is hosted on the preview side (like live), so the form column
   on the right never grows when it opens. Kept separate from the compiled
   app.css so it is easy to find and tweak. */

.personalise-crop {
	margin: 0;
	padding: 0.5rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

.personalise-crop__stage {
	display: inline-flex;
	justify-content: center;
	max-width: 100%;
	background: #111;
	border-radius: 0.5rem;
	overflow: hidden;
	padding: 8px;
}

/* Cropper.js needs a block-level image with no max-width constraint. */
.personalise-crop__img {
	display: block;
	max-width: 100%;
}

.personalise-crop__hint {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	line-height: 1.35;
	opacity: 0.7;
	text-align: center;
	max-width: 640px;
}

.personalise-crop__tools,
.personalise-crop__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.personalise-crop__actions {
	margin-top: 1rem;
}

.personalise-crop__error,
.personalise-photo__note {
	font-size: 0.8rem;
	line-height: 1.35;
}

.personalise-crop__error {
	margin: 0.5rem 0 0;
	color: #b32d2e;
	text-align: center;
}

/* Shown once a crop has been applied — this is the image we receive. */
.personalise-photo {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin-top: 0.75rem;
	padding: 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
}

.personalise-photo__thumb {
	width: 92px;
	height: 92px;
	object-fit: contain;
	border-radius: 0.375rem;
	background: #f4f4f4;
	flex: 0 0 auto;
}

.personalise-photo__body {
	min-width: 0;
}

.personalise-photo__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

.personalise-photo__note {
	margin: 0.2rem 0 0;
	opacity: 0.75;
}

.personalise-photo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

/* Buttons — deliberately plain so they inherit the theme's look. */
.personalise-btn {
	appearance: none;
	cursor: pointer;
	padding: 0.5rem 0.9rem;
	font-size: 0.8rem;
	line-height: 1;
	border-radius: 9999px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.personalise-btn:hover {
	border-color: rgba(0, 0, 0, 0.45);
}

.personalise-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.personalise-btn--primary {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.personalise-btn--primary:hover {
	background: #333;
	border-color: #333;
}

/* The editor's two commit actions — "Use this crop" and "Cancel" — carry the
   decision the whole editor exists for, so they sit a size up from the small
   tool buttons (rotate/reset): taller padding and a larger label make them
   comfortably tappable rather than hover-precision targets. */
.personalise-crop__actions .personalise-btn {
	padding: 0.9rem 1.75rem;
	font-size: 1rem;
}

/* Cropper.js paints its own box; keep it inside the stage. */
.personalise-crop .cropper-container {
	max-width: 100%;
}

/* Small screens stack the preview above the form — let the preview area
   grow so the editor and its controls are never clipped. */
@media (max-width: 1000px) {
	.personalise-image__left.is-editing,
	.personalise-printed__left.is-editing {
		height: auto;
		padding: 1rem 0;
	}
}

/* Mobile: a Done bar for the crop editor.
   Small screens keep the whole editor and its scroller inside the modal; the
   checkout bar sits fixed at the bottom (disabled while cropping), which
   reads as a locked screen. While the editor is open we swap that bar for a
   single Done action in the same slot — one tap commits the crop (applyCrop)
   and the checkout bar comes straight back. Desktop (>= 1024px) never shows
   this: there the editor's own "Use this crop" button is the single confirm. */
.personalise-donebar {
	display: none;
}

@media (max-width: 1023px) {
	.personalise-donebar.is-editing-show {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 12px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgb(249, 249, 247);
		border-top: 1px solid rgb(205, 212, 212);
	}

	.personalise-donebar__btn {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 20px;
		border: 0;
		border-radius: 9999px;
		background: #ecd2c3;
		color: rgb(3, 39, 40);
		font: inherit;
		font-family: futura-pt, sans-serif;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.personalise-donebar__btn:active {
		background: #e3c4b2;
	}

	.personalise-donebar__btn:disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	/* While the crop editor is open the checkout bar (disabled anyway) is
	   replaced by the Done bar above. */
	.personalise-atcbar.is-editing-hide {
		display: none;
	}
}

/* Upload / order feedback overlay — shown while the cropped photo uploads
   and the order posts, so a slow connection never reads as a frozen screen.
   Sits above the modal (z-modal = 102) and everything else; the submit()
   round-trip is a terminal state, so it deliberately blocks interaction. */
.personalise-uploading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(3, 39, 40, 0.45);
	cursor: progress;
}

.personalise-uploading__card {
	width: 100%;
	max-width: 320px;
	background: #ffffff;
	padding: 28px 24px;
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 18px 40px rgba(3, 39, 40, 0.25);
}

.personalise-uploading__spinner {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 16px;
	border: 3px solid rgba(3, 39, 40, 0.15);
	border-top-color: #032728;
	border-radius: 50%;
	animation: personalise-uploading-spin 0.9s linear infinite;
}

@keyframes personalise-uploading-spin {
	to {
		transform: rotate(360deg);
	}
}

.personalise-uploading__title {
	font-family: futura-pt, sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	line-height: 1.2;
	color: #032728;
	margin: 0;
}

.personalise-uploading__bar {
	position: relative;
	height: 4px;
	margin: 16px 0 0;
	background: rgba(3, 39, 40, 0.12);
	border-radius: 2px;
	overflow: hidden;
}

.personalise-uploading__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: #ecd2c3;
	border-radius: 2px;
	transition: width 0.2s linear;
}

.personalise-uploading__hint {
	font-size: 12px;
	line-height: 1.4;
	color: rgba(3, 39, 40, 0.7);
	margin: 12px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.personalise-uploading__spinner {
		animation: none;
	}
}