/**
 * Magnet Image Cropper v2 — UI styles.
 * Brand purple #5603AD per the LLM brand guide (v1 used WP-admin blue).
 */

.crop-container {
	margin: 15px 0;
	padding: 15px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.crop-container img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.crop-container .cropped-preview {
	max-width: 200px;
	margin: 10px auto;
}

.crop-container button.crop-button {
	display: block;
	margin: 15px auto 0 !important;
	background-color: #5603ad !important;
	border-color: #5603ad !important;
	color: #fff !important;
	padding: 8px 16px !important;
	border-radius: 3px !important;
	cursor: pointer;
}

.crop-container button.crop-button:hover {
	background-color: #45028a !important;
	border-color: #45028a !important;
}

.crop-container button.crop-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.crop-status {
	margin: 10px 0;
	padding: 8px 12px;
	border-radius: 4px;
	text-align: center;
}

.crop-status--ok {
	color: #007a3d;
	font-weight: bold;
}

.crop-status--error {
	color: #e2401c;
}

.crop-status--busy {
	color: #5603ad;
	font-weight: bold;
}

.crop-warning {
	margin: 10px 0;
	padding: 8px 12px;
	border-radius: 4px;
	text-align: center;
	background-color: #fff8e5;
	border-left: 4px solid #dba617;
	color: #674f00;
	font-size: 14px;
}

.crop-instructions {
	margin: 10px;
	padding: 10px;
	background-color: #f5f0fb;
	border-left: 4px solid #5603ad;
	color: #5603ad;
	font-size: 14px;
	text-align: center;
	border-radius: 0;
}

/* Cropper.js overrides — purple guide lines to match the instructions copy. */
.cropper-view-box {
	border-radius: 0;
	outline: 2px solid #5603ad;
	outline-color: rgba(86, 3, 173, 0.9);
}

.cropper-face {
	border-radius: 0;
}

.cropper-line,
.cropper-point {
	background-color: #5603ad;
}

.cropper-modal {
	background-color: rgba(0, 0, 0, 0.8);
}