/* Mobile responsiveness */
@media (max-width: 768px) {
	.footer-nav {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.modal-content {
		width: 95%;
		margin: 10% auto;
		padding: 1.5rem;
	}
}


/* Responsive adjustments */
@media (max-width: 768px) {
	.image-upload-section {
		flex-direction: row;
		/* Changed from column to row to keep side by side */
		flex-wrap: wrap;
		/* Allow wrapping if needed */
		gap: 10px;
		/* Reduced gap for mobile */
	}

	.image-upload-container {
		min-width: 45%;
		/* Ensure containers take up enough width */
		flex: 1 1 45%;
		/* Allow some flexibility while maintaining side-by-side */
	}

	.image-result {
		flex-direction: column;
	}
}


/* Mobile responsiveness for SEO content */
@media screen and (max-width: 768px) {
	.central-scrollbar {
		width: 10px;
		/* Even narrower on mobile */
	}

	.scrollbar-track {
		width: 3px;
	}

	.scrollbar-indicator {
		width: 8px;
		height: 30px;
	}
}


/* Responsive adjustments */
@media (max-width: 768px) {

	.image-result {
		flex-direction: column;
	}
}


/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	.compare-button-container {
		flex-direction: row;
		gap: 0.75rem;
	}

	.compare-button-container .btn {
		min-width: 0;
		flex: 1;
		padding: 0.75rem 1rem;
		font-size: 1rem;
	}

	/* Ensure button text is centered on mobile */
	.btn#compareBtn,
	.btn#compareImagesBtn,
	.btn#clearBtn {
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
		width: auto;
		/* Allow buttons to size based on content */
		min-width: 108px;
		/* Ensure minimum width */
		padding: 0.85rem 0.75rem;
		font-size: 1.1rem;
		width: 45%;
		justify-content: center;
	}
}

/* Responsive design */
@media (max-width: 1200px) {
	.container {
		max-width: 95%;
	}
}


@media (max-width: 768px) {

	/* Keep comparison container side by side */
	.comparison-container {
		display: flex;
		flex-direction: row;
		gap: 10px;
		width: 100%;
		overflow-x: auto;
	}

	/* Make text containers take equal width */
	.text-container {
		flex: 1;
		min-width: 45%;
		max-width: 50%;
	}

	/* Keep result container side by side on mobile too */
	.result-container {
		display: none;
		/* Keep initially hidden */
		flex-direction: row;
		gap: 10px;
		width: 100%;
		overflow-x: auto;
	}

	/* Make result sections take equal width */
	.result-section {
		flex: 1;
		min-width: 45%;
		min-height: 100px;
		/* Add minimum height */
	}

	/* Adjust result content for mobile */
	.result-content {
		padding: 0.5rem;
		font-size: 11px;
	}

	/* Hide the central scrollbar on mobile */
	.central-scrollbar {
		display: none;
	}

	/* Make text areas smaller to fit side by side */
	.text-wrapper {
		height: 360px;
		/* Reduce height on mobile */
	}

	/* Reduce padding to maximize space */
	.text-area {
		padding: 0.5rem;
		font-size: 11px;
		/* Slightly smaller font */
	}

	/* Reduce line numbers width */
	.line-numbers {
		width: 25px;
		font-size: 10px;
		padding: 0.5rem 0.15rem;
	}

	/* Make the header more compact */
	header {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
		padding: 0.75rem;
	}

	.controls {
		width: 100%;
		justify-content: center;
	}

	/* Add horizontal scrolling for the text containers if needed */
	.text-container {
		min-width: 0;
		/* Allow containers to shrink */
	}

	.text-area {
		overflow-x: auto;
		/* Enable horizontal scrolling */
	}


}


@media (max-width: 480px) {

	.comparison-container,
	.result-container {
		gap: 5px;
		/* Even smaller gap */
	}

	/* Ensure result container uses flex in smallest screens too */
	.result-container.active {
		display: flex !important;
		/* Force flex display when active */
	}

	.text-wrapper {
		height: 360px;
		/* Even smaller height */
	}

	.text-area,
	.line-numbers,
	.result-content {
		font-size: 9px;
		/* Smaller font */
	}

	/* Make headers more compact */
	.text-header h3,
	.result-section h3 {
		font-size: 0.8rem;
	}

	/* Hide some elements to save space */
	.text-header i {
		display: none;
	}

	.btn::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
}

/* Header styles for mobile */
@media (max-width: 768px) {
	header {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		padding: 0.5rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		top: 0;
		z-index: 1000;
	}

	header h1 {
		font-size: 1.2rem;
		margin: 0;
		color: white;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	header .controls {
		display: flex;
		gap: 0.5rem;
		padding: 0.25rem 0;
		justify-content: center;
		flex-wrap: wrap;
	}

	.header-buttons {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
	}

	.header-button {
		padding: 0.35rem 0.75rem;
		font-size: 0.9rem;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.2);
		color: white;
		backdrop-filter: blur(5px);
		transition: all 0.2s ease;
	}

	.header-button:hover {
		background: rgba(255, 255, 255, 0.25);
		transform: translateY(-1px);
	}

	/* Compact layout for very small screens */
	@media (max-width: 480px) {
		header {
			padding: 0.35rem;
		}

		header h1 {
			font-size: 1rem;
		}

		.header-buttons {
			gap: 0.25rem;
		}

		.header-button {
			padding: 0.25rem 0.5rem;
			font-size: 0.8rem;
		}

	}
}

@media (max-width: 768px) {
	.header-nav {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		background: var(--bg-secondary);
		border-radius: 50px;
		padding: 12px 24px;
		box-shadow: 0 4px 12px rgb(255 255 255 / 15%);
		z-index: 1000;
	}

	.header-nav {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-right: 20px;
	}

	.nav-link {
		color: #ffffff;
		text-decoration: none;
		font-size: 17px;
		transition: color 0.3s ease;
	}

	.btn::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
}


@media (max-width: 768px) {

	/* Make header navigation responsive */
	header {
		flex-direction: column;
		padding: 1rem;
	}

	.controls {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		margin-top: 0.5rem;
	}

	.nav-item {
		font-size: 0.9rem;
		padding: 0.4rem 0.8rem;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 0.5rem;
		white-space: nowrap;
		width: auto;
		text-align: center;
	}

	/* Ensure navigation items are visible */
	.nav-item:not(.btn) {
		display: inline-block;
		color: white;
		opacity: 0.9;
	}

	.nav-item:hover {
		background: rgba(255, 255, 255, 0.2);
		opacity: 1;
	}
}


@media (max-width: 480px) {


	.header-nav {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-right: 20px;
	}

	/* Make header navigation responsive */
	header {
		flex-direction: column;
		padding: 1rem;
	}

	.controls {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		margin-top: 0.5rem;
	}

	.nav-item {
		font-size: 0.9rem;
		padding: 0.4rem 0.8rem;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 0.5rem;
		white-space: nowrap;
		width: auto;
		text-align: center;
	}

	/* Ensure navigation items are visible */
	.nav-item:not(.btn) {
		display: inline-block;
		color: white;
		opacity: 0.9;
	}

	.nav-item:hover {
		background: rgba(255, 255, 255, 0.2);
		opacity: 1;
	}
}


@media (min-width: 768px) {
	.header-nav {
		position: relative;
		left: 25%;
		transform: translateX(-50%);
		background: var(--bg-secondary);
		border-radius: 50px;
		padding: 12px 24px;
		box-shadow: 0 4px 12px rgb(255 255 255 / 15%);
		z-index: 1000;
	}

	.header-nav {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-right: 20px;
	}
}