// croppy.css

#canvasContainer {
	position: relative;
	z-index: 1;
}

.crop-handle {
	width: 16px;
	height: 16px;
	background: white;
	border: 3px solid #3b82f6;
	position: absolute;
	cursor: nw-resize;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
	z-index: 100;
	pointer-events: auto;
}
.crop-handle:hover {
	background: #3b82f6;
	border-color: white;
}
.crop-overlay {
	border: 2px dashed #3b82f6;
/*	background: rgba(59, 130, 246, 0.1); */
	pointer-events: none;
	z-index: 50;
}
/* POI throbbing animation */
@keyframes poi-throb {
	0% {
		background: #dc2626 !important; /* Darker red for more contrast */
		box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 2px rgba(220, 38, 38, 0.8);
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		background: #1d4ed8 !important; /* Darker blue for more contrast */
		box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 6px rgba(29, 78, 216, 0.6);
		transform: translate(-50%, -50%) scale(1.1);
	}
	100% {
		background: #dc2626 !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 2px rgba(220, 38, 38, 0.8);
		transform: translate(-50%, -50%) scale(1);
	}
}

.point-of-interest {
	width: 20px;
	height: 20px;
	background: #ef4444 !important;
	border: 4px solid white;
	border-radius: 50%;
	position: absolute;
	cursor: move;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
	z-index: 90;
	animation: poi-throb 1s ease-in-out infinite !important;
}
.point-of-interest:hover {
	background: #dc2626 !important;
	animation: none !important; /* Stop animation on hover for better interaction */
	transform: translate(-50%, -50%) scale(1.2) !important;
}
.preview-canvas {
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.preview-canvas:hover {
	border-color: #3b82f6;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.modal-overlay {
	backdrop-filter: blur(4px);
}

/* Dark mode styles */
.dark {
	color-scheme: dark;
}

/* Body and main containers */
.dark body {
	background-color: #111827 !important;
	color: #f9fafb !important;
}

/* Headers and panels */
.dark .bg-white {
	background-color: #1f2937 !important;
}
.dark .bg-gray-50 {
	background-color: #111827 !important;
}
.dark .bg-gray-100 {
	background-color: #374151 !important;
}
.dark .bg-gray-200 {
	background-color: #4b5563 !important;
}

/* Text colors */
.dark .text-gray-900 {
	color: #f9fafb !important;
}
.dark .text-gray-800 {
	color: #e5e7eb !important;
}
.dark .text-gray-700 {
	color: #d1d5db !important;
}
.dark .text-gray-600 {
	color: #9ca3af !important;
}
.dark .text-gray-500 {
	color: #6b7280 !important;
}
.dark .text-gray-400 {
	color: #9ca3af !important;
}

/* Borders */
.dark .border-b {
	border-color: #374151 !important;
}
.dark .border-l {
	border-color: #374151 !important;
}
.dark .border {
	border-color: #4b5563 !important;
}
.dark .border-gray-600 {
	border-color: #4b5563 !important;
}

/* Form elements */
.dark input, .dark select {
	background-color: #1f2937 !important;
	color: #f9fafb !important;
	border-color: #4b5563 !important;
}

/* Buttons */
.dark .bg-gray-100 {
	background-color: #374151 !important;
}
.dark .hover\:bg-gray-200:hover {
	background-color: #4b5563 !important;
}
.dark .hover\:bg-gray-50:hover {
	background-color: #374151 !important;
}

/* Canvas and image areas */
.dark .preview-canvas {
	border-color: #374151;
}

.dark .preview-canvas:hover {
	border-color: #3b82f6 !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}
.dark .crop-handle {
	background: #1f2937;
	border-color: #3b82f6;
}
.dark .crop-handle:hover {
	background: #3b82f6;
	border-color: #1f2937;
}
/* Dark mode POI animation */
@keyframes poi-throb-dark {
	0% {
		background: #dc2626 !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 0 2px rgba(220, 38, 38, 0.9);
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		background: #3b82f6 !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 0 6px rgba(59, 130, 246, 0.7);
		transform: translate(-50%, -50%) scale(1.1);
	}
	100% {
		background: #dc2626 !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 0 2px rgba(220, 38, 38, 0.9);
		transform: translate(-50%, -50%) scale(1);
	}
}

.dark .point-of-interest {
	border-color: #1f2937;
	animation: poi-throb-dark 1s ease-in-out infinite !important;
}

/* Enhanced image cards - override Tailwind classes */
#imageShelf .source-image-item.enhanced-image-card,
.enhanced-image-card {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
	background-color: transparent !important; /* Override any single background-color */
	transition: all 0.2s ease-in-out !important;
	border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

#imageShelf .source-image-item.enhanced-image-card:hover,
.enhanced-image-card:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
	background-color: transparent !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
	transform: translateY(-1px) !important;
}

.dark #imageShelf .source-image-item.enhanced-image-card,
.dark .enhanced-image-card {
	background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%) !important;
	background-color: transparent !important;
	border: 1px solid rgba(156, 163, 175, 0.2) !important;
}

.dark #imageShelf .source-image-item.enhanced-image-card:hover,
.dark .enhanced-image-card:hover {
	background: linear-gradient(135deg, #4b5563 0%, #6b7280 50%, #9ca3af 100%) !important;
	background-color: transparent !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Image filename styling */
#imageShelf .source-image-item .image-filename,
.source-image-item .image-filename {
	font-size: 0.625rem !important; /* xs size */
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
	color: #64748b !important;
	background: rgba(255, 255, 255, 0.8) !important;
	background-color: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(4px) !important;
	border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
}

.dark #imageShelf .source-image-item .image-filename,
.dark .source-image-item .image-filename {
	color: #94a3b8 !important;
	background: rgba(31, 41, 55, 0.8) !important;
	background-color: rgba(31, 41, 55, 0.8) !important;
	border-top: 1px solid rgba(156, 163, 175, 0.2) !important;
}

/* Source resolution indicator in filename area */
.source-resolution-indicator {
	color: #475569 !important;
	font-weight: 600 !important;
	background: rgba(148, 0, 184, 0.4) !important;
	padding: 2px 4px !important;
	border-radius: 3px !important;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
}

.dark .source-resolution-indicator {
	color: #cbd5e1 !important;
	background: rgba(148, 0, 184, 0.3) !important;
}

/* Filter styling */
.filter-text-xxs {
	font-size: 0.5rem; /* Extra extra small */
}

.filter-reset-btn {
	transition: all 0.15s ease;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	padding: 1px !important;
	border-radius: 3px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.7;
	margin: 0 !important;
	flex-shrink: 0;
}

.filter-reset-btn:hover {
	opacity: 1;
	background-color: rgba(156, 163, 175, 0.2) !important;
}

.dark .filter-reset-btn:hover {
	background-color: rgba(75, 85, 99, 0.3) !important;
}

.filter-reset-btn i,
.filter-reset-btn [data-lucide] {
	width: 12px !important;
	height: 12px !important;
	stroke-width: 2.5 !important;
}

/* Ensure consistent spacing for filter labels to prevent layout shift */
.filter-reset-btn.hidden {
	/* Keep the space reserved even when hidden */
	visibility: hidden !important;
	display: inline-flex !important;
}

/* Improve filter label layout */
#fileInfoPanel .flex.items-center.gap-1 {
	min-height: 18px;
	align-items: center;
}

/* Targets */
.dark .bg-blue-100 {
	background-color: #1e3a8a !important;
}
.dark .text-blue-800 {
	color: #93c5fd !important;
}
.dark .bg-gray-200 {
	background-color: #4b5563 !important;
}
.dark .text-gray-600 {
	color: #d1d5db !important;
}

/* Modal overlays */
.dark .modal-overlay {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Hover states */
.dark .hover\:text-gray-800:hover {
	color: #e5e7eb !important;
}
.dark .hover\:text-gray-700:hover {
	color: #f3f4f6 !important;
}
.dark .hover\:text-gray-200:hover {
	color: #f9fafb !important;
}

/* Specific overrides */
.dark .text-red-600 {
	color: #f87171 !important;
}
.dark .text-blue-600 {
	color: #60a5fa !important;
}

/* Canvas background */
.dark #mainCanvas {
	background-color: #1f2937 !important;
}
.dark #fineCropCanvas {
	background-color: #374151 !important;
}

/* Panel slide animation */
.control-panel {
	transition: transform 0.3s ease-in-out;
	transform: translateX(0);
}

.control-panel.hidden {
	transform: translateX(100%);
}

.source-panel {
	transition: transform 0.3s ease-in-out;
}

.source-panel.hidden {
	transform: translateX(-100%);
}

/* effectsPanel */
#effectsPanel {
	overflow-y: auto;
}

/* Drag and drop styles */
.drag-over {
	background-color: rgba(59, 130, 246, 0.1) !important;
	border-color: #3b82f6 !important;
	border-style: dashed !important;
}

.drag-drop-zone {
	transition: all 0.2s ease-in-out;
}

/* Preview card size variations - Square aspect ratio */
.preview-card-small {
	width: 180px !important;
	aspect-ratio: 1 !important;
	height: auto !important;
}

.preview-card-small .preview-canvas-container {
	height: auto !important;
	flex: 1 !important;
}

/* Hide button text for small cards */
.preview-card-small .button-text {
	display: none !important;
}

.preview-card-small button {
	padding: 4px !important;
}

.preview-card-medium {
	width: 220px !important;
	aspect-ratio: 1 !important;
	height: auto !important;
}

.preview-card-medium .preview-canvas-container {
	height: auto !important;
	flex: 1 !important;
}

.preview-card-large {
	width: 280px !important;
	aspect-ratio: 1 !important;
	height: auto !important;
}

.preview-card-large .preview-canvas-container {
	height: auto !important;
	flex: 1 !important;
}


/* Three-step slider styles */
.three-step-slider {
	position: relative;
	width: 100%;
	height: 20px;
	background: #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
}

.dark .three-step-slider {
	background: #374151;
}

.three-step-slider-track {
	position: absolute;
	top: 50%;
	left: 8px;
	right: 8px;
	height: 2px;
	background: #d1d5db;
	transform: translateY(-50%);
}

.dark .three-step-slider-track {
	background: #6b7280;
}

.three-step-slider-handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	background: #3b82f6;
	border: 2px solid white;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.2s ease;
	cursor: grab;
}

.three-step-slider-handle:active {
	cursor: grabbing;
	transform: translate(-50%, -50%) scale(1.1);
}

.three-step-slider-step {
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #9ca3af;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.dark .three-step-slider-step {
	background: #6b7280;
}

.three-step-slider-step.active {
	background: #3b82f6;
}

.three-step-slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 0.75rem;
	color: #6b7280;
}

.dark .three-step-slider-labels {
	color: #9ca3af;
}

/* Preview size overlay */
.preview-size-overlay {
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.95);
	min-width: 85px;
	transition: all 0.2s ease;
}

.dark .preview-size-overlay {
	background: rgba(31, 41, 55, 0.95);
}

.preview-size-overlay:hover {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dark .preview-size-overlay:hover {
	background: rgba(31, 41, 55, 0.98);
}

/* Compact slider for overlay */
.preview-size-overlay .three-step-slider {
	height: 14px;
	margin: 2px 0;
}

.preview-size-overlay .three-step-slider-handle {
	width: 10px;
	height: 10px;
}

.preview-size-overlay .three-step-slider-step {
	width: 3px;
	height: 3px;
}

.preview-size-overlay .three-step-slider-labels {
	margin: 0;
	padding: 0;
}

/* Panel height adjustments */
.output-panel.size-small {
	height: 220px !important; /* Increased to accommodate taller cards */
}

.output-panel.size-medium {
	height: 340px !important; /* Increased from 320px */
}

.output-panel.size-large {
	height: 420px !important; /* Increased from 400px */
}

/* Resolution target styles */
.resolution-target {
	transition: all 0.2s;
}
.resolution-target.disabled {
	opacity: 0.5;
	background-color: #f9fafb;
}
.dark .resolution-target.disabled {
	background-color: #374151;
}

/* Enhanced preview card styles */
.preview-card-enhanced {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid #e2e8f0;
	position: relative;
	overflow: hidden;
}

.dark .preview-card-enhanced {
	background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
	border-color: #475569;
}

/* Preview card indicators */
.preview-indicator {
	position: absolute;
	top: 8px;
	font-size: 0.625rem;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	text-transform: uppercase;
	line-height: 1.2;
	z-index: 10;
}

.preview-resolution-indicator {
	left: 8px;
	background: rgba(51, 65, 85, 0.9);
	color: white;
	backdrop-filter: blur(4px);
}

.preview-format-indicator {
	right: 8px;
	color: white;
	backdrop-filter: blur(4px);
}

.preview-format-jpg {
	background: rgba(251, 146, 60, 0.9); /* Orange */
}

.preview-format-png {
	background: rgba(59, 130, 246, 0.9); /* Blue */
}

.preview-format-webp {
	background: rgba(34, 197, 94, 0.9); /* Green */
}

/* Quality progress bar */
.quality-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(0, 0, 0, 0.1);
}

.dark .quality-progress {
	background: rgba(255, 255, 255, 0.1);
}

.quality-progress-fill {
	height: 100%;
	transition: width 0.3s ease;
	border-radius: 0 0 6px 6px;
}

.quality-high .quality-progress-fill {
	background: linear-gradient(90deg, #10b981, #34d399);
}

.quality-medium .quality-progress-fill {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.quality-low .quality-progress-fill {
	background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Universal collapsible banner system styles */
.config-banner {
	border-radius: 0.375rem;
	border: 1px solid #e5e7eb;
	margin-bottom: 0.5rem;
	background: white;
	transition: all 0.3s ease;
}

.dark .config-banner {
	border-color: #374151;
	background: #1f2937;
}

.banner-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.banner-header:hover {
	background-color: #f9fafb;
}

.dark .banner-header:hover {
	background-color: #374151;
}

.banner-title {
	font-weight: 600;
	font-size: 0.875rem;
	color: #374151;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dark .banner-title {
	color: #d1d5db;
}

.banner-toggle {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: #6b7280;
	transition: all 0.2s ease;
}

.dark .banner-toggle {
	color: #9ca3af;
}

.banner-toggle:hover {
	color: #374151;
}

.dark .banner-toggle:hover {
	color: #d1d5db;
}

.chevron-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s ease;
}

.config-banner.collapsed .chevron-icon {
	transform: rotate(-90deg);
}

.banner-content {
	padding: 0 0.75rem 0.75rem 0.75rem;
	transition: all 0.3s ease;
	overflow: hidden;
}

.config-banner.collapsed .banner-content {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

/* Unified pill styles for all badges/pills */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* Enabled pill state */
.pill.enabled {
	background-color: #3b82f6;
	color: white;
	border-color: #3b82f6;
}

.pill.enabled:hover {
	background-color: #2563eb;
	border-color: #2563eb;
}

/* Disabled pill state */
.pill.disabled {
	background-color: transparent;
	color: #6b7280;
	border-color: #d1d5db;
}

.dark .pill.disabled {
	color: #9ca3af;
	border-color: #374151;
}

.pill.disabled:hover {
	background-color: #f3f4f6;
	color: #374151;
}

.dark .pill.disabled:hover {
	background-color: #374151;
	color: #d1d5db;
}

/* Selected pill state (for templates) */
.pill.selected {
	background-color: #10b981;
	color: white;
	border-color: #10b981;
}

.pill.selected:hover {
	background-color: #059669;
	border-color: #059669;
}

/* Special colored pills for target sets */
.pill.target-set.enabled {
	background-color: var(--pill-bg-color, #3b82f6);
	color: white;
	border-color: var(--pill-bg-color, #3b82f6);
}

.pill.target-set.enabled:hover {
	filter: brightness(0.9);
}

.pill.target-set.disabled {
	background-color: transparent;
	color: var(--pill-bg-color, #6b7280);
	border-color: var(--pill-bg-color, #d1d5db);
}

.dark .pill.target-set.disabled {
	color: var(--pill-bg-color, #9ca3af);
	border-color: var(--pill-bg-color, #374151);
}

.pill.target-set.disabled:hover {
	background-color: rgba(var(--pill-bg-color-rgb, 59, 130, 246), 0.1);
}

/* Collage cell styling */
.collage-cell {
	min-height: 100px;
	max-width: 180px;
}

.collage-cell canvas {
	max-width: 100%;
	height: auto;
}

/* Ensure source panel constrains height properly and has minimum width */
.source-images-col {
	overflow: hidden;
	min-width: 200px !important;
	flex-shrink: 0;
}

/* Container for pills */
.pills-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* Container for layers */
.layers-container {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin-top: 0.5rem;
}

/* Individual layer styling */
.overlay-layer {
	display: flex;
	align-items: center;
	padding: 0.25rem;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem;
	cursor: grab;
	transition: all 0.2s ease;
	user-select: none;
}

.dark .overlay-layer {
	background: #374151;
	border-color: #4b5563;
}

.overlay-layer:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
}

.dark .overlay-layer:hover {
	background: #4b5563;
	border-color: #6b7280;
}


.overlay-layer.disabled {
	opacity: 0.5;
}

/* Layer thumbnail */
.layer-thumbnail {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.25rem;
	object-fit: cover;
	margin-right: 0.5rem;
	border: 1px solid #e5e7eb;
	background: #f9fafb;
}

.dark .layer-thumbnail {
	border-color: #4b5563;
	background: #374151;
}

/* Layer content */
.layer-content {
	flex: 1;
	min-width: 0;
}

.layer-name {
	font-weight: 500;
	font-size: 0.75rem;
	color: #374151;
	truncate: true;
}

.dark .layer-name {
	color: #d1d5db;
}

/* Layer controls */
.layer-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.layer-toggle {
	padding: 0.25rem;
	border-radius: 0.25rem;
	border: none;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s ease;
}

.layer-toggle:hover {
	background: #e5e7eb;
	color: #374151;
}

.dark .layer-toggle {
	color: #9ca3af;
}

.dark .layer-toggle:hover {
	background: #4b5563;
	color: #d1d5db;
}

.layer-toggle.enabled {
	color: #059669;
}

.dark .layer-toggle.enabled {
	color: #10b981;
}

/* Reorder handles */
.layer-handle {
	color: #9ca3af;
	cursor: grab;
	padding: 0.25rem;
}

.layer-handle:hover {
	color: #6b7280;
}

.layer-handle:active {
	cursor: grabbing;
}

/* Drop placeholder for layer reordering */
.layer-drop-placeholder {
	height: 4px;
	background: #3b82f6;
	border-radius: 2px;
	margin: 4px 0;
	opacity: 0;
	transition: all 0.2s ease;
}

.layer-drop-placeholder.active {
	opacity: 1;
	height: 8px;
}

/* Layer being dragged */
.overlay-layer.dragging {
	opacity: 0.3 !important;
	transform: rotate(5deg) scale(1.1) !important;
	cursor: grabbing !important;
	z-index: 1000 !important;
	pointer-events: none !important;
	background: #ff9999 !important;
	border: 3px solid #ff0000 !important;
}

/* Drop zone styling - Subtle by default, visible during drag */
.layer-drop-zone {
	min-height: 4px;
	background: transparent;
	border: none;
	transition: all 0.2s ease;
	margin: 2px 0;
	opacity: 0;
	cursor: pointer;
}

/* When dragging starts, make drop zones visible */
.layer-drop-zone.drag-active {
	min-height: 12px;
	background: rgba(59, 130, 246, 0.2);
	border: 1px dashed rgba(59, 130, 246, 0.5);
	opacity: 1;
}

/* When hovering over a drop zone during drag */
.layer-drop-zone.drag-over {
	min-height: 50px;
	background: rgba(59, 130, 246, 0.3);
	border: 2px dashed rgba(59, 130, 246, 0.8);
}

/* Excluded drop zones remain invisible */
.layer-drop-zone.drag-excluded {
	opacity: 0 !important;
	cursor: not-allowed;
}

/* Checkerboard pattern for transparency visualization */
.checkerboard-bg {
	background-image:
		linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* Main container should use full viewport height */
#mainContainer {
	height: 100vh;
}

/* Ensure full width in mobile portrait mode */
body.mobile-portrait,
@media (max-width: 768px) and (orientation: portrait) {
	html, body {
		width: 100% !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}
}

body.mobile-portrait {
	width: 100% !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

body.mobile-portrait #mainContainer,
@media (max-width: 768px) and (orientation: portrait) {
	#mainContainer {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 100% !important;
		min-height: auto !important;
		height: auto !important;
	}
}

body.mobile-portrait #mainContainer {
	width: 100% !important;
	max-width: 100vw !important;
	min-width: 100% !important;
	min-height: auto !important;
	height: auto !important;
}

/* Center view should be flexible and take remaining space after bottomPanel */
#centerView {
	flex: 1;
	min-height: 0; /* Allow shrinking below content size */
	min-width: 600px; /* Ensure minimum total width */
	overflow: hidden; /* Prevent overflow when bottomPanel grows */
}

/* Bottom panel should grow with content, not fixed height */
#bottomPanel {
	height: auto !important;
	max-height: 60vh; /* Prevent taking over entire screen */
	flex-shrink: 0; /* Don't shrink when centerView needs space */
}

/* Control panel should show scrollbars when content overflows */
#controlPanel {
	overflow-y: auto;
	overflow-x: hidden;
}

#fileInfoPanel {
	overflow-y: auto;
	overflow-x: hidden;	
}

/* Output panel should grow with content rather than being constrained by parent height */
#cropOutputPanel, #collageOutputPanel {
	min-height: 100%;
	height: auto !important;
}

/* Preview area should also grow with content */
#cropPreviewArea, #collagePreviewArea {
	min-height: 100%;
	height: auto !important;
}

/* Responsive canvas sizing for larger screens */
@media (min-width: 1920px) {
	#mainCanvas, #fineCropCanvas {
		max-width: 90vw;
		max-height: 75vh;
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	#mainCanvas, #fineCropCanvas {
		max-width: 85vw;
		max-height: 70vh;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	#mainCanvas, #fineCropCanvas {
		max-width: 80vw;
		max-height: 65vh;
	}
}

/* Vertical panel toggle slivers */
.panel-toggle-sliver {
	position: relative;
	user-select: none;
}

.panel-toggle-sliver::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: 32px;
	background: currentColor;
	opacity: 0.4;
	border-radius: 999px;
	transition: all 0.2s ease;
}

.panel-toggle-sliver:hover::before {
	opacity: 0.8;
	height: 40px;
	width: 2px;
}

.panel-toggle-sliver:active::before {
	opacity: 1;
	background: #3b82f6;
}

/* Panel minimum widths for all screen sizes */
.source-images-col {
	min-width: 200px !important;
	max-width: 300px !important;
}

.control-panel {
	min-width: 200px !important;
	max-width: 300px !important;
}

/* Responsive breakpoints for larger screens */
@media (min-width: 1920px) {
	.source-images-col {
		width: 16rem !important; /* More space for larger screens */
		min-width: 256px !important;
	}
	.control-panel {
		width: 18rem !important;
		min-width: 288px !important;
	}
	.output-panel {
		height: 24rem !important; /* Taller output panel */
	}
}

@media (min-width: 1440px) and (max-width: 1919px) {
	.source-images-col {
		width: 14rem !important;
		min-width: 224px !important;
	}
	.control-panel {
		width: 16rem !important;
		min-width: 256px !important;
	}
	.output-panel {
		height: 20rem !important;
	}
}

/* Responsive breakpoints for smaller screens */
@media (max-width: 768px) {
	.source-images-col {
		width: 12rem !important; /* 192px */
	}
	.control-panel {
		width: 14rem !important; /* 224px */
	}
	.output-panel {
		height: 12rem !important; /* 192px */
	}
	.output-panel .w-48 {
		width: 8rem !important; /* Make controls column narrower on mobile */
	}
}

@media (max-width: 640px) {
	.source-images-col {
		width: 10rem !important; /* 160px */
	}
	.control-panel {
		width: 12rem !important; /* 192px */
	}
	.output-panel {
		height: 10rem !important; /* 160px */
	}
	.preview-cards {
		gap: 0.5rem !important;
	}
	.output-panel .w-48 {
		width: 7rem !important; /* Even narrower on small screens */
	}
}

/* Additional utility classes for smaller text and margins */
.text-2xs {
	font-size: 0.6rem;
	line-height: 0.8rem;
}

.mb-0\.5 {
	margin-bottom: 0.125rem;
}

/* Quality badge styling */
.quality-badge {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 1px 3px;
	border-radius: 2px;
	font-weight: 600;
	margin-left: 2px;
}

.dark .quality-badge {
	background-color: rgba(255, 255, 255, 0.08);
}

/* Square aspect ratio for cards */
.aspect-square {
	aspect-ratio: 1 / 1;
}

/* Square aspect ratio is now default - these rules are redundant */
.preview-card-small.aspect-square {
	width: 180px !important;
}

.preview-card-medium.aspect-square {
	width: 220px !important;
}

.preview-card-large.aspect-square {
	width: 280px !important;
}

/* Mode-specific visibility for unified control panel */
body.crop-mode .collage-only {
	display: none !important;
}

body.collage-mode .crop-only {
	display: none !important;
}

/* Mode-specific workspace visibility */
body.crop-mode #collageWorkspace {
	display: none !important;
}

body.collage-mode #cropWorkspace {
	display: none !important;
}

/* Logo pill styling */
.logo-pill {
	background-color: white !important;
}

/* ===== MOBILE RESPONSIVE ENHANCEMENTS ===== */

/* Touch-friendly controls */
@media (max-width: 768px) {
	/* Increase touch targets for mobile */
	.crop-handle {
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}

	.point-of-interest {
		width: 28px;
		height: 28px;
	}

	/* Ensure minimum 44px touch target */
	button, .cursor-pointer {
		min-height: 44px;
		min-width: 44px;
	}

	/* Better spacing for mobile */
	.space-y-3 > * + * {
		margin-top: 0.75rem;
	}

	/* Mobile header adjustments */
	#header {
		padding: 0.75rem 1rem;
	}

	/* Mobile canvas container */
	#canvasContainer {
		max-width: calc(100vw - 2rem);
		max-height: calc(50vh);
	}

	#mainCanvas, #fineCropCanvas {
		max-width: 100% !important;
		max-height: 100% !important;
		height: auto;
	}

	/* Mobile-optimized output panel */
	#bottomPanel {
		max-height: 45vh;
		min-height: 200px;
	}

	/* Mobile preview cards - smaller and more touch-friendly */
	.preview-cards {
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.preview-card-small {
		width: 140px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}

	.preview-card-medium {
		width: 180px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}

	.preview-card-large {
		width: 220px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}
}

/* Mobile-specific layouts */
@media (max-width: 640px) {
	/* Ultra-compact for phones */
	.preview-card-small {
		width: 120px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}

	.preview-card-medium {
		width: 140px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}

	.preview-card-large {
		width: 160px !important;
		aspect-ratio: 1 !important;
		height: auto !important;
	}

	/* Smaller text on mobile */
	.text-sm {
		font-size: 0.75rem;
	}

	.text-xs {
		font-size: 0.6875rem;
	}
}

/* Mobile FAB and overlays */
#mobileFAB {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: scale(1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#mobileFAB:active {
	transform: scale(0.95);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile menu overlay animations */
#mobileMenuOverlay {
	animation: fadeIn 0.3s ease;
}

#mobileMenuOverlay > div {
	animation: slideUpIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUpIn {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Mobile source panel */
#mobileSourcePanel {
	animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

/* Mobile-optimized modals */
@media (max-width: 768px) {
	.modal-overlay .bg-white,
	.modal-overlay .dark\\:bg-gray-800 {
		margin: 0.5rem;
		max-height: calc(100vh - 1rem);
		border-radius: 0.75rem;
	}

	/* Compact modal headers */
	.modal-overlay .p-6:first-child {
		padding: 1rem;
	}

	/* Responsive modal content */
	.modal-overlay .grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.modal-overlay .grid.md\\:grid-cols-2 {
		grid-template-columns: 1fr;
	}

	.modal-overlay .grid.md\\:grid-cols-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Canvas responsiveness improvements */
.canvas-container-mobile {
	position: relative;
	width: 100%;
	max-width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Touch gesture hints */
.touch-hint {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.touch-hint.visible {
	opacity: 1;
}

/* Swipe indicators */
.swipe-indicator {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(59, 130, 246, 0.9);
	color: white;
	padding: 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	z-index: 100;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
}

.swipe-indicator.left {
	left: 1rem;
	transform: translateY(-50%) translateX(-100%);
}

.swipe-indicator.right {
	right: 1rem;
	transform: translateY(-50%) translateX(100%);
}

.swipe-indicator.visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Mobile landscape optimizations */
@media (orientation: landscape) and (max-height: 500px) {
	#header {
		padding: 0.5rem 1rem;
	}

	#centerView {
		min-height: calc(100vh - 4rem);
	}

	#cropCanvas {
		padding: 0.5rem;
	}

	#bottomPanel {
		max-height: 35vh;
	}
}

/* Ensure mobile controls are accessible */
@media (max-width: 768px) {
	/* Hide desktop-only elements */
	.desktop-only {
		display: none !important;
	}

	/* Show mobile-only elements */
	.mobile-only {
		display: block !important;
	}

	/* Improve button spacing and sizing */
	button {
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	/* Better form controls */
	input[type="range"] {
		height: 2rem;
		appearance: none;
		background: transparent;
		cursor: pointer;
	}

	input[type="range"]::-webkit-slider-track {
		height: 6px;
		background: #d1d5db;
		border-radius: 3px;
	}

	input[type="range"]::-webkit-slider-thumb {
		appearance: none;
		height: 24px;
		width: 24px;
		border-radius: 50%;
		background: #3b82f6;
		cursor: pointer;
		border: 2px solid white;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	input[type="range"]::-moz-range-track {
		height: 6px;
		background: #d1d5db;
		border-radius: 3px;
	}

	input[type="range"]::-moz-range-thumb {
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background: #3b82f6;
		cursor: pointer;
		border: 2px solid white;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
}

/* ===== MOBILE PORTRAIT LAYOUT TRANSFORMATIONS ===== */

/* Apply to both forced toggle mode AND natural portrait mobile */
body.mobile-portrait .source-images-col,
@media (max-width: 768px) and (orientation: portrait) {
	.source-images-col {
		width: 100% !important;
		max-width: none !important;
		border-right: none !important;
		border-bottom: 1px solid #e5e7eb !important;
		padding: 0.75rem !important;
		height: auto !important;
	}

	.dark .source-images-col {
		border-bottom-color: #374151 !important;
	}

	/* Make source images scroll horizontally */
	.source-images-col .space-y-3 {
		display: flex !important;
		flex-direction: row !important;
		gap: 0.75rem !important;
		overflow-x: auto !important;
		padding-bottom: 0.5rem !important;
		scrollbar-width: thin;
	}

	.source-images-col .space-y-3 > * + * {
		margin-top: 0 !important;
	}

	/* Source image items as horizontal thumbnails */
	.source-image-item {
		min-width: 220px !important;
		width: 220px !important;
		height: 220px !important;
		flex-shrink: 0 !important;
	}

	.source-image-item img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* Hide toggle slivers */
	#sourcePanelToggle,
	#panelToggle {
		display: none !important;
	}

	/* Stack main areas vertically */
	#centerView {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 100% !important;
		flex: none !important;
	}

	/* Transform control panel to appear below canvas */
	.control-panel {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		border-left: none !important;
		border-top: 1px solid #e5e7eb !important;
		max-height: 50vh !important;
		overflow-y: auto !important;
	}

	.dark .control-panel {
		border-top-color: #374151 !important;
	}

	/* Canvas area adjustments */
	#cropCanvas {
		min-height: 40vh !important;
		max-height: 45vh !important;
		padding: 0.5rem !important;
	}

	#canvasContainer {
		max-width: calc(100vw - 1rem) !important;
	}

	/* Transform bottom panel to horizontal cards */
	#bottomPanel {
		height: auto !important;
		max-height: none !important;
		padding: 0.75rem !important;
	}

	#bottomPanel .flex-1 {
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}

	.preview-cards {
		flex-direction: column !important;
		gap: 0.75rem !important;
		min-height: auto !important;
	}

	/* Make all preview cards 75% viewport width and square in portrait mode */
	.preview-card-small,
	.preview-card-medium,
	.preview-card-large {
		min-width: 75vw !important;
		width: 75vw !important;
		aspect-ratio: 1 !important;
		height: auto !important;
		flex-shrink: 0 !important;
		margin: 0 auto !important;
	}

	/* Hide preview size overlay */
	.preview-size-overlay {
		display: none !important;
	}
}

/* Apply same styles when body has mobile-portrait class (for toggle) */
body.mobile-portrait .source-images-col {
	width: 100% !important;
	max-width: none !important;
	border-right: none !important;
	border-bottom: 1px solid #e5e7eb !important;
	padding: 0.75rem !important;
	height: auto !important;
}

body.mobile-portrait .dark .source-images-col {
	border-bottom-color: #374151 !important;
}

body.mobile-portrait .source-images-col .space-y-3 {
	display: flex !important;
	flex-direction: row !important;
	gap: 0.75rem !important;
	overflow-x: auto !important;
	padding-bottom: 0.5rem !important;
	scrollbar-width: thin;
}

body.mobile-portrait .source-images-col .space-y-3 > * + * {
	margin-top: 0 !important;
}

body.mobile-portrait .source-image-item {
	min-width: 220px !important;
	width: 220px !important;
	height: 220px !important;
	flex-shrink: 0 !important;
}

body.mobile-portrait .source-image-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

body.mobile-portrait #sourcePanelToggle,
body.mobile-portrait #panelToggle {
	display: none !important;
}

body.mobile-portrait #centerView {
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100vw !important;
	min-width: 100% !important;
	flex: none !important;
}

body.mobile-portrait .control-panel {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	border-left: none !important;
	border-top: 1px solid #e5e7eb !important;
	max-height: 50vh !important;
	overflow-y: auto !important;
}

body.mobile-portrait .dark .control-panel {
	border-top-color: #374151 !important;
}

body.mobile-portrait #cropCanvas {
	min-height: 40vh !important;
	max-height: 45vh !important;
	padding: 0.5rem !important;
}

body.mobile-portrait #canvasContainer {
	max-width: calc(100vw - 1rem) !important;
}

body.mobile-portrait #bottomPanel {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	padding: 0.75rem !important;
}

body.mobile-portrait #bottomPanel .flex-1 {
	overflow-x: auto !important;
	overflow-y: hidden !important;
}

body.mobile-portrait .preview-cards {
	flex-direction: column !important;
	gap: 0.75rem !important;
	min-height: auto !important;
}

body.mobile-portrait .preview-card-small,
body.mobile-portrait .preview-card-medium,
body.mobile-portrait .preview-card-large {
	min-width: 75vw !important;
	width: 75vw !important;
	aspect-ratio: 1 !important;
	height: auto !important;
	flex-shrink: 0 !important;
	margin: 0 auto !important;
}

body.mobile-portrait .preview-size-overlay {
	display: none !important;
}

/* ===== MOBILE ADJUST EFFECTS BUTTON & SLIDING PANEL ===== */

/* Show adjust effects button only in mobile portrait mode */
.mobile-portrait-only {
	display: none;
}

body.mobile-portrait .mobile-portrait-only,
@media (max-width: 768px) and (orientation: portrait) {
	.mobile-portrait-only {
		display: flex !important;
	}
}

body.mobile-portrait .mobile-portrait-only {
	display: flex !important;
}

/* Transform effectsPanel into a sliding mobile edit panel */
body.mobile-portrait #effectsPanel,
@media (max-width: 768px) and (orientation: portrait) {
	#effectsPanel {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 50vh !important;
		max-height: 60vh !important;
		z-index: 1000 !important;
		transform: translateY(100%) !important;
		transition: transform 0.3s ease-in-out !important;
		border: none !important;
		overflow-y: auto !important;
		background: rgba(255, 255, 255, 0.8) !important;
		backdrop-filter: blur(20px) saturate(1.8) !important;
		-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
		border-radius: 16px 16px 0 0 !important;
		border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
	}
}

body.mobile-portrait #effectsPanel {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 50vh !important;
	max-height: 60vh !important;
	z-index: 1000 !important;
	transform: translateY(100%) !important;
	transition: transform 0.3s ease-in-out !important;
	border: none !important;
	overflow-y: auto !important;
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(20px) saturate(1.8) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
	color: #1f2937 !important;
	border-radius: 16px 16px 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.mobile-portrait #effectsPanel *,
@media (max-width: 768px) and (orientation: portrait) {
	#effectsPanel * {
		color: #1f2937 !important;
	}
}

body.mobile-portrait #effectsPanel * {
	color: #1f2937 !important;
}

/* Dark mode text colors for mobile edit panel */
body.mobile-portrait .dark #effectsPanel *,
@media (max-width: 768px) and (orientation: portrait) {
	.dark #effectsPanel * {
		color: #f3f4f6 !important;
	}
}

body.mobile-portrait .dark #effectsPanel * {
	color: #f3f4f6 !important;
}

body.mobile-portrait .dark #effectsPanel,
@media (max-width: 768px) and (orientation: portrait) {
	.dark #effectsPanel {
		background: rgba(17, 24, 39, 0.85) !important;
		backdrop-filter: blur(20px) saturate(1.8) !important;
		-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3), 0 -2px 8px rgba(0, 0, 0, 0.15) !important;
		color: #f3f4f6 !important;
	}
}

body.mobile-portrait .dark #effectsPanel {
	background: rgba(17, 24, 39, 0.85) !important;
	backdrop-filter: blur(20px) saturate(1.8) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3), 0 -2px 8px rgba(0, 0, 0, 0.15) !important;
	color: #f3f4f6 !important;
}

/* Show panel when it has the 'open' class */
body.mobile-portrait #effectsPanel.open,
@media (max-width: 768px) and (orientation: portrait) {
	#effectsPanel.open {
		transform: translateY(0) !important;
	}
}

body.mobile-portrait #effectsPanel.open {
	transform: translateY(0) !important;
}

/* Add close button to mobile edit panel */
body.mobile-portrait #effectsPanel::before,
@media (max-width: 768px) and (orientation: portrait) {
	#effectsPanel::before {
		content: '';
		position: sticky !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: 60px !important;
		background: inherit !important;
		border-bottom: 1px solid #e5e7eb !important;
		z-index: 10 !important;
	}
}

/* Mobile edit panel header */
.mobile-edit-header {
	position: sticky;
	top: 0;
	background: inherit;
	border-bottom: 1px solid #e5e7eb;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}

.dark .mobile-edit-header {
	border-bottom-color: #374151;
}

/* Backdrop overlay for mobile edit panel - transparent for photo editing */
.mobile-edit-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

.mobile-edit-backdrop.open {
	opacity: 1;
	visibility: visible;
}

/* Mobile edit panel close button positioning */
body.mobile-portrait #closeMobileEditPanel,
@media (max-width: 768px) and (orientation: portrait) {
	#closeMobileEditPanel {
		position: static !important;
		width: 100% !important;
		height: 48px !important;
		border-radius: 12px 12px 0 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: rgba(0, 0, 0, 0.05) !important;
		border: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		color: #6b7280 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}
}

body.mobile-portrait #closeMobileEditPanel {
	position: static !important;
	width: 100% !important;
	height: 48px !important;
	border-radius: 16px 16px 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0, 0, 0, 0.05) !important;
	border: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	color: #6b7280 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

body.mobile-portrait #closeMobileEditPanel:hover,
@media (max-width: 768px) and (orientation: portrait) {
	#closeMobileEditPanel:hover {
		background: rgba(255, 255, 255, 1) !important;
		transform: scale(1.05) !important;
	}
}

body.mobile-portrait #closeMobileEditPanel:hover {
	background: rgba(255, 255, 255, 1) !important;
	transform: scale(1.05) !important;
}

/* Hide desktop-only elements in mobile portrait mode */
body.mobile-portrait .desktop-only,
@media (max-width: 768px) and (orientation: portrait) {
	.desktop-only {
		display: none !important;
	}
}

body.mobile-portrait .desktop-only {
	display: none !important;
}

/* Show mobile edit header only in mobile portrait mode */
body.mobile-portrait .mobile-edit-header,
@media (max-width: 768px) and (orientation: portrait) {
	.mobile-edit-header {
		display: flex !important;
	}
}

body.mobile-portrait .mobile-edit-header {
	display: flex !important;
}

/* Hide the close button in the header since we have a floating one */
body.mobile-portrait .mobile-edit-header #closeMobileEditPanel,
@media (max-width: 768px) and (orientation: portrait) {
	.mobile-edit-header #closeMobileEditPanel {
		display: none !important;
	}
}

body.mobile-portrait .mobile-edit-header #closeMobileEditPanel {
	display: none !important;
}