/* /static/css/index.css */
/* ------------------------------------ */
/* ---------- Global elements --------- */
/* ------------------------------------ */

@import "commons.css";
@import "checkout.css";
@import "orders.css";
@import "credits.css";
@import "footer.css";
@import "blog.css";
@import "admin.css";
@import "error-page.css";
@import "profile.css";
@import "cart.css";
@import "about.css";
@import "legal.css";
@import "gallery.css";
@import "navbar.css";
@import "edit-page.css";

/* -------------------------------- */

/* View All Uploads/Images Button */
.btn-view-all {
	background-color: #22c55e;
	color: white;
	padding: 10px 20px;
	margin-top: 20px;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

/* Spinner overlay during login */

.spinner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.loadingSpinner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 100000;
}

.loadingSpinner.active {
	display: flex;
}

.spinner {
	border: 5px solid #f1f1f1;
	border-top: 5px solid #c9b9a2;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	/* Optional: add shadow to make spinner pop against blur */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	.loadingSpinner {
		background: rgba(0, 0, 0, 0.8);
	}
}

.spinner-message {
	color: #666;
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	padding: 8px 12px;
	border-radius: 50px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.loadingSpinner.active .spinner-message {
	opacity: 1;
	transform: translateY(0);
}

/* Only show gap when message exists */
.spinner-message:not(:empty) {
	height: auto;
	margin-top: 12px;
	opacity: 1;
	transform: translateY(0);
}

/* Hide element completely when empty */
.spinner-message:empty {
	display: none;
}

.region-note {
    color: #856404;
    background-color: #fff3cd;
    padding: 8px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 768px) {
    .region-note {
        font-size: 12px;
        padding: 6px;
    }
}

/* ------------------------------------ */
/* ---------- Modal elements ---------- */
/* ------------------------------------ */

/* 3. Modal Styling - used in nav, menu button */
.auth-modal,
.qr-modal,
.unsaved-modal,
.generate-modal {
	display: none; /* Hidden by default */
	position: fixed;
	z-index: 200;
	left: 0;
	top: 3%;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: transparent;
}

.auth-modal-content,
.qr-modal-content,
.unsaved-modal-content,
.generate-modal-content {
	background-color: #c9b9a2;
	margin: 10% auto;
	padding: 20px;
	border-radius: 20px;
	width: 90%;
	max-width: 500px;
	max-height: 100vh;
	overflow-y: auto; /* Enable vertical scrolling when content overflows */
	text-decoration: none !important;
}

.unsaved-modal {
	top: 20%;
}

.generate-modal {
	overflow: hidden;
	max-width: 80%;
	left: 10%;
	top: 0%;
}

.generate-modal-content {
	width: auto;
	max-width: 100%;
	background-color: rgba(201, 185, 162, 0.8);
	backdrop-filter: blur(20px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 20px;
	color: #333;
}

.auth-modal-content i {
	padding: 4px;
}

.generate-modal-content i {
	padding: 2px;
}

.auth-modal-content,
.qr-modal-content,
.unsaved-modal-content,
.generate-modal-content h2 {
	text-align: center;
	margin-top: 5px;
	color: #333 !important;
}

.auth-modal-content,
.qr-modal-content,
.unsaved-modal-content,
.generate-modal-content p {
	line-height: 1.6;
	text-align: center;
}

.auth-modal-content,
.qr-modal-content,
.unsaved-modal-content,
.generate-modal-content a {
	color: #666;
	text-decoration: underline;
}

.auth-modal-content {
	width: 100% !important;
}

/* Modal Header Layout */
.generate-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}

/* Tips Slideshow */
.generate-modal-header .tips-slideshow {
    flex: 1; /* Take up available space on the left */
    position: relative;
    height: 30px; /* Default height */
    overflow: hidden; /* Hide inactive tips */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically center the text */
}

.generate-modal-header .slideshow-tip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    color: #333; /* Default color for the tip content */
    font-size: 15px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 50px;
    box-sizing: border-box; /* Ensure padding doesn't exceed height */
    line-height: 1.2; /* Adjust line height for better fit */
}

/* Ensure the text inside slideshow-tip is centered */
.generate-modal-header .slideshow-tip span {
    display: inline; /* Allows the span to flow with the text */
}

.generate-modal-header .slideshow-tip span + span {
    display: none; /* Prevent extra spans from affecting layout if added later */
}

.generate-modal-header .slideshow-tip.active-tip {
    opacity: 1;
}

/* Close Button Positioning */
.generate-modal-content .close-button {
    position: static; /* Remove absolute positioning */
    width: 32px;
    height: 32px;
    color: #666;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    transition: all 0.2s;
}

.generate-modal-content .close-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .generate-modal-header {
        flex-direction: column;
        align-items: flex-end;
		flex-flow: column-reverse;
        gap: 10px;
    }

    .generate-modal-header .tips-slideshow {
        width: 100%;
        height: 40px; /* Increased height to accommodate text and padding */
        text-align: center;
        margin-bottom: 5px; /* Space before the close button */
    }

    .generate-modal-header .slideshow-tip {
        font-size: 12px;
        position: static; /* Remove absolute positioning on mobile */
        opacity: 1; /* Show all tips, let JavaScript handle active state */
        width: auto; /* Allow natural width */
        margin: 0 auto; /* Center the tip horizontally */
		padding: 4px 6px;
        display: none; /* Hide by default, JavaScript will show active tip */
    }

    .generate-modal-header .slideshow-tip.active-tip {
        display: block; /* Show only the active tip */
    }
}

/* Generate image modal further style */
/* Generate Image Form */
#generateImageForm {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 40px;
	margin-top: 20px;
	padding: 20px 30px;
}

#generateImageForm label {
	font-size: 1.1rem;
	font-weight: bold;
	color: #333;
}

#generateImageForm textarea {
	pointer-events: auto;
	cursor: text;
	width: 100%;
	height: 180px;
	padding: 10px;
	border-radius: 10px;
	resize: vertical;
	font-size: 16px;
	background: rgba(255, 255, 255, 0.2);
	color: #333;
	scrollbar-width: none;
}

#generateImageForm textarea::placeholder {
	color: #333;
	font-size: 0.8rem;
}

#generateImageForm .sliding-tips p {
	margin: 0px;
}

.model-selection {
    padding: 10px 20px; /* Match button padding */
    font-size: 16px;   /* Match button font size */
    border: none;
    border-radius: 10px; /* Rounded corners like buttons */
    background-color: #f0f0f0; /* White background */
    cursor: pointer; /* Hand cursor like buttons */
    margin-left: 10px; /* Space from Generate button */
	color: #333;
	height: auto;
}

.model-selection:hover {
    background-color: #f0f0f0; /* Light hover effect */
}

.model-selection option {
	border-radius: 10px;
    background-color: #f0f0f0; /* Ensure options match */
}

.generate-form-left,
.generate-form-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.generation-options {
	display: flex;
	gap: 1rem;
	margin: 0.5rem 0;
}

.option-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.5rem;
}

.option-checkbox input[type="checkbox"] {
	width: 0.9rem;
	height: 0.9rem;
	cursor: pointer;
}

.generation-options label {
	font-size: 14px !important;
}

#generateImageForm .aspect-ratio-options {
	display: flex;
	gap: 15px;
	justify-content: space-between;
}

#generateImageForm .theme-options {
	display: flex;
	flex-flow: wrap;
	gap: 5px;
	justify-content: center;
}

#generateImageForm .aspect-ratio-options label {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #333;
	font-size: 14px;
}

#generateImageForm .theme-options label {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #333;
	font-size: 14px;
}

#generateImageForm button[type="submit"] {
	padding: 10px 20px;
	background-color: #22c55e;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
	width: 100%;
}

#generateImageForm button[type="submit"]:hover {
	background-color: #25d467;
}

#generateImageForm .layout-option img,
.theme-option img {
	width: 100px;
	height: auto;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: border-color 0.3s, transform 0.3s;
}

#generateImageForm .layout-option img:hover,
.theme-option img:hover {
	border-color: #333; /* Highlight border on hover */
	transform: scale(1.1);
}

#generateImageForm .layout-option input:checked + img,
.theme-option input:checked + img {
	border-color: #007bff; /* Highlight border when selected */
}

#generateImageForm .layout-option span,
.theme-option span {
	margin-top: 5px;
	font-size: 14px;
	color: #555;
}

/* Generate Container Styles */
.generate-container {
	margin-top: 20px;
	text-align: center;
}

.generate-container h5 {
	margin-bottom: 10px;
	color: #fff;
}

.generate-container .prompt-container textarea {
	font-size: large;
	text-align: center;
	height: auto;
	width: 400px;
	border: none;
	border-radius: 10px;
	padding: 15px 15px 0px 15px;
	margin-bottom: auto;
	align-items: center;
	justify-content: center;
	overflow: visible;
	scrollbar-width: none;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.prompt-container textarea {
	background: #fff !important;
}

.generate-container #generateImageForm textarea::-webkit-scrollbar {
	display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

.generate-container button#generateImageButton {
	margin-top: 15px;
	padding: 10px 20px;
	background-color: #fff; /* Green */
	color: #333;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.generate-container button#generateImageButton:hover {
	background-color: #f1f1f1;
}

/* Action Buttons Styles */
.action-buttons-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.action-buttons-container .inner-flex-elements {
	display: flex;
	width: -webkit-fill-available;
	align-items: center;
	justify-content: center;
}

.action-button {
	padding: 10px 20px;
	background-color: #22c55e; /* Green */
	color: #333;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	margin: 10px 5px;
	font-size: 14px;
	transition: background-color 0.3s ease;
	width: fit-content;
}

.generate-container .active-button {
	width: fit-content !important;
}

.action-button:hover {
	background-color: #f1f1f1;
}

.action-button a {
	text-decoration: none;
	color: #333;
}

.action-buttons-wrapper .buy-poster {
	background-color: #22c55e !important;
	color: #fff !important;
	width: auto;
}

.inner-flex-elements button {
	width: max-content;
}

#surpriseMeButton {
	background-color: #f1f1f1;
}

#surpriseMeButton .action-button {
	width: max-content !important;
}

.prompt-tips {
	background-color: #f1f1f1;
}

/* Prompt Tips Content */
.prompt-tips-content ul {
	list-style-type: disc;
	padding-left: 20px;
}

.prompt-tips-content li {
	text-align: start;
	margin-bottom: 10px;
	font-size: 16px;
}

/* Responsive Design */
@media (max-width: 600px) {
	.auth-modal {
		top: 0%;
	}
	
	.generate-modal {
		top: 0% !important;
		left: 0%;
		max-width: 100%;
		overflow-y: scroll;
	}

	.generate-modal-content {
		margin: auto;
		width: 100%;
		background-color: rgba(201, 185, 162, 0.9);
	}

	#generateImageForm {
		flex-direction: column;
		margin-top: 0px;
		gap: 10px;
	}

	.generate-form-left,
	.generate-form-right {
		gap: 10px;
		overflow-y: scroll;
	}

	.generation-options {
		gap: 0.3rem;
	}

	.generation-options label {
		font-size: 12px !important;
	}

	.generate-container .prompt-container textarea {
		width: 100%;
		height: 70px;
	}

	.generate-container .aspect-ratio-options {
		flex-direction: column;
		align-items: flex-start;
		gap: 0px;
	}

	.generate-container .theme-options {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media screen and (min-width: 600px) and (max-width: 1025px) {
	.generate-modal {
		left: 25% !important;
		top: 55% !important;
	}
}

/* Login with Google button */
.login-with-google-button {
	background-color: #fff; /* Google red */
	color: #333;
	padding: 12px 20px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-size: 1rem;
}

.fa-google {
	background: conic-gradient(
			from -45deg,
			#ea4335 110deg,
			#4285f4 90deg 180deg,
			#34a853 180deg 270deg,
			#fbbc05 270deg
		)
		73% 55%/150% 150% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.login-with-google-button:hover {
	background-color: #f1f1f1;
}

/* Logout button in the modal */
.logout-button {
	background-color: #f1f1f1;
	color: #333;
	padding: 12px 20px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-size: 1rem;
	margin-bottom: 10px;
}

.logout-button:hover {
	background-color: #f44336;
}

/* Close welcome modal button */
.close-welcome-button {
	background-color: #22c55e; /* Green */
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.close-welcome-button:hover {
	background-color: #34a853;
}

/* Modal logo */
.modal-logo img {
	width: 130px;
	height: auto;
	margin-bottom: 10px;
	margin-left: 30px;
}

.modal-buttons {
	margin-top: 20px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.modal-buttons button {
	margin: 0 10px;
	padding: 10px 20px;
	cursor: pointer;
	align-items: center;
	border: none;
	border-radius: 10px;
}

.delete-account-button {
	background-color: #666;
	color: #fff;
	border-radius: 10px;
}

#modalSaveButton {
	background-color: #22c55e; /* Green */
	color: white;
}

#modalDiscardButton {
	background-color: #f44336; /* Red */
	color: white;
}

#modalCancelButton {
	background-color: #555; /* Grey */
	color: white;
}

/* 4. QR code container to show QR codes of AR files on Desktop devices */
.qr-code-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.qr-modal-content h2 {
	margin-bottom: 0px;
}

.qr-code-item {
	margin: 20px;
	text-align: center;
}

.qr-code-item h3 {
	margin-bottom: 10px;
}

.qr-code-item div {
	width: 150px;
	height: 150px;
}

.qr-code-item img {
	text-align: center;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 600px) {
	.qr-code-container {
		flex-direction: column;
	}
}

/* Delete Account Modal Specific Styles */
.auth-modal-content .generate-modal-content .confirm-delete {
	background-color: #f44336; /* Red color for delete action */
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 10px;
	margin-right: 10px;
}

.auth-modal-content .generate-modal-content .cancel-button {
	background-color: #666; /* Grey color for cancel */
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 10px;
}

.auth-modal-content .generate-modal-content .modal-buttons {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.auth-modal-content .generate-modal-content p {
	text-align: center;
	margin-top: 20px;
	font-size: 16px;
}

/* ------------------------------------ */
/* ---------- Landing elements -------- */
/* ------------------------------------ */

/* 5. Landing Section Styling - used in homepage, welcome page */
.landing {
	position: relative;
	width: 100%;
	height: 100vh; /* Full viewport height */
	background-color: transparent; /* Transparent to show the background image */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* Hide any overflowing content */
}

/* Background Image for Landing Section */
.landing::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #c9b9a2 url("../images/bg/background_9_16.webp") no-repeat
		center center;
	background-size: cover;
	z-index: -1;
}

@media screen and (min-width: 768px) {
	.landing::before {
		background: white url("../images/bg/background_16_9.webp") no-repeat
			center center;
		background-size: cover;
		/* filter: blur(12px); */
	}
}

/* 5(a). Slideshow Container Styling - used in landing page */
.slideshow-container {
	margin-top: 7vh;
	width: 50vw; /* Set width based on viewport width */
	height: auto; /* Set height to auto for responsive sizing */
	max-height: 60vh; /* Ensure the height does not exceed 60% of the viewport height */
	overflow: hidden;
	z-index: 1; /* Ensure it's above the background */
}

/* Slide Styling */
.slide {
	display: none;
	position: relative;
	transition: opacity 2s ease-in-out !important; /* Smooth fade transition */
}

.slide img,
.uploaded-image {
	width: 100%;
	height: auto;
	object-fit: contain; /* Maintain aspect ratio */
}

.slide img,
#uploadedImage {
	border: 10px solid rgba(0, 0, 0, 0.1);
	padding: 10px; /* Space between image and border */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.slide img {
	padding: 0px;
}

#uploadedImage {
	border: none;
}

#uploadContainer.processing .action-button,
#uploadContainer.processing .buy-poster,
#uploadContainer.processing .resize-slider {
    display: none;
}

.generate-buttons-container .secondary-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.secondary-buttons-container .how-to-use-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
	margin-top: 10px;
    background-color: rgba(43, 123, 125, 0.1);
    color: #fff;
	font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.secondary-buttons-container .how-to-use-button:hover {
    transform: scale(1.02);
}

/* Desktop: Keep all buttons in a row */
@media (min-width: 769px) {
    .generate-buttons-container {
        flex-direction: row;
        gap: 10px;
    }
    .secondary-buttons-container {
        width: auto;
    }
}

/* Mobile: Generate button on top, Credits and How to Use side by side */
@media (max-width: 768px) {
    .generate-buttons-container {
        flex-direction: column;
    }
    .secondary-buttons-container {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .secondary-buttons-container {
        gap: 5px;
    }
    .secondary-button {
        padding: 5px 10px;
        font-size: 12px;
    }
    .secondary-button i {
        font-size: 14px;
    }
}
/* iOS-specific fixes */

@media screen and (max-width: 768px) {
	.uploadContent > * {
		background: transparent !important;
	}

	.generate-container,
	.prompt-container,
	.uploadContent-left,
	.uploadContent-right {
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* Fix dotted border containers */
	[class*="dotted-border"] {
		background: transparent !important;
	}

	/* Override any default white backgrounds */
	textarea,
	input {
		background: transparent !important;
	}

	.slideshow-container {
		display: none;
	}
}

/*5(b). AR Info Styling - used in landing page below slideshow */
.ar-info {
	background: rgba(201, 185, 162, 0.5); /* Adjusted for better visibility */
	font-style: italic;
	color: #666;
	font-size: small;
	padding: 5px;
	border-radius: 10px;
}

.ar-message {
	text-align: center;
	margin-top: 8px;
	font-size: 1rem;
	color: #333;
}

/* Credits shown on index page */

.generate-buttons-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0px;
}

/* Landscape Warning Message Styling - used on landing page top */
.landscape-warning {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #c9b9a2;
	padding: 10px;
	border-radius: 5px;
	z-index: 10000; /* Ensure it's above other content */
	font-size: 16px; /* Adjust font size */
	text-align: center; /* Center the text */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Add some shadow for better visibility */
}

/* Generated Label for Previous Uploads */
.image-source-label {
	position: absolute;
	top: 8px;
	left: 8px;
	background-color: rgba(255, 255, 255, 0.7);
	color: #666;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 4;
}

/* 5(c). Style for the uploaded image - used to show user uploaded image */
/* used in index.html */
.uploaded-image-container {
	/* margin-top: -10vh !important; */
	width: 60vw;
	max-height: 60vh;
	border-radius: 15px;
	overflow: visible;
	z-index: 1;
	margin-bottom: 20px; /* Center and add top margin */
}

/* NEW UTILITY CLASS FOR HIDING WITHOUT AFFECTING LAYOUT */
.layout-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents clicks on the invisible element */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Smooth fade out */
}

/* used in JS files? */
#uploadedImageContainer {
	position: static;
	transform: none;
}

#uploadedImage {
	max-width: 100%;
	max-height: 100%;
	transition: width 0.3s ease, height 0.3s ease; /* Smooth resizing */
}

/* 5(d). Style for the resize image controls container - used in landing page */
#resizeControls {
	display: none; /* Hidden by default */
	position: absolute; /* Position it over the background on desktop */
	top: 90%; /* Adjust as needed */
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	padding: 10px 20px;
	border-radius: 10px;
	z-index: 4;
	flex-direction: column; /* Ensure contents stack vertically */
	align-items: center; /* Center contents horizontally */
}

#resizeSlider {
	cursor: pointer;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #666;
}

#resizeControls.visible {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Control Group Styles */
.control-group {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

/* Adjust the last control group's margin-bottom */
.control-group:last-child {
	margin-bottom: 0;
}

/* Label Styles */
.control-group label {
	color: #111;
	font-size: 15px;
	white-space: nowrap;
}

/* Slider Styles */
.control-group input[type="range"] {
	width: 150px; /* Adjust as needed */
}

/* Value Display Styles */
.control-group span {
	color: #111;
	font-size: 15px;
}

/* Style for the close button */
#closeResizeControls,
#closeUploadContainer {
	position: absolute;
	top: -10px;
	right: -10px;
	background: #ff4d4d;
	border: none;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	cursor: pointer;
	font-weight: bold;
	color: white;
	font-size: 16px;
	line-height: 25px;
	text-align: center;
	padding: 0;
}

#closeUploadContainer {
	top: -10px;
	right: -10px;
}

/* Responsive adjustments for resize image controls container*/
@media (max-width: 768px) {
	#resizeControls {
		position: relative; /* Position it over the background */
		top: 5%; /* Adjust as needed */
		right: 10%;
		left: 45%;
		width: 90%;
		margin: 0 auto;
		justify-content: center;
		align-items: center;
		transform: translateX(-50%);
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
		padding: 10px 20px;
		border-radius: 10px;
		z-index: 4;
		display: none; /* Ensure it's hidden initially on mobile */
	}
	#resizeControls.visible {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Control Group Styles */
	.control-group {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}

	/* Adjust the last control group's margin-bottom */
	.control-group:last-child {
		margin-bottom: 0;
	}

	/* Label Styles */
	.control-group label {
		color: #111;
		font-size: 15px;
		white-space: nowrap;
	}

	/* Slider Styles */
	.control-group input[type="range"] {
		width: 150px; /* Adjust as needed */
	}

	/* Value Display Styles */
	.control-group span {
		color: #111;
		font-size: 15px;
	}

	#closeResizeControls,
	#closeUploadContainer {
		position: absolute;
		top: -10px;
		right: -10px;
		background: #ff4d4d;
		border: none;
		border-radius: 50%;
		width: 25px;
		height: 25px;
		cursor: pointer;
		font-weight: bold;
		color: white;
		font-size: 16px;
		line-height: 25px;
		text-align: center;
		padding: 0;
	}

	#closeUploadContainer {
		top: -15px;
		right: -5px;
	}

	#resizeSlider {
		cursor: pointer;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #666;
	}

	#uploadedImageContainer {
		position: static;
		transform: none;
	}

	.prompt-container textarea {
		max-width: fit-content;
		padding: 15px;
	}

	.generate-buttons-container {
		flex-direction: column;
	}
}

/* 5(e). Upload Container Styling - used in landing page, under slideshow*/

.uploadContent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
	max-width: 80vw;
}

@media (max-width: 768px) {
	.uploadContent {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uploadContent-left,
	.uploadContent-right {
		padding: 10px !important;
		/* width: 75vw; */
	}
	.uploadContent-right {
		width: auto !important;
	}
}

.uploadContent-left,
.uploadContent-right {
	flex: 1;
	border-style: dashed;
	border-color: #111;
	padding: 30px 50px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	border-radius: 20px;
}

.uploadContent-left h1,
.uploadContent-right h1 {
	margin-bottom: 15px;
	font-size: 1.2rem;
	text-align: center;
	color: #fff;
}

.uploadContent-left .generate-container,
.uploadContent-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.uploadContent-right {
	padding: 0px;
	margin: 0px;
	width: 0;
}
.uploadContent-right h5 {
	text-align: center !important;
	font-size: 0.6rem;
	color: #666;
	align-items: center !important;
	justify-content: center !important;
}

.upload-container {
	width: fit-content !important;
	padding: 10px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	z-index: 2;
	text-align: center;
	cursor: pointer;
	margin: 60px auto 0 auto;
	border-radius: 20px;
}

.upload-container h5 {
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 1.4em;
	color: #fff;
}

.upload-container p {
	font-size: 1em;
	color: #fff;
	/* margin-bottom: 10px; */
}

.upload-container.hidden {
	opacity: 0;
	transform: translateY(-20px);
}

/* 5(f). Progress bar container - used in upload container */
.progress-bar-container {
	width: 80%;
	height: 8px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	margin: 10px auto; /* Center the progress bar */
}

/* Animated stick inside the progress bar */
.progress-bar-stick {
	width: 25%; /* Stick width */
	height: 100%;
	background-color: #c9b9a2;
	border-radius: 4px;
	position: absolute;
	animation: pingPong 2s ease-in-out infinite; /* Ping-pong animation */
}

/* Ping-pong animation */
@keyframes pingPong {
	0% {
		left: 0;
	}
	50% {
		left: 75%;
	} /* Move to the right */
	100% {
		left: 0;
	} /* Return to the start */
}

/* Styling for the progress message text */
.progress-message {
	color: #fff;
	font-size: 1em;
	overflow: hidden;
	transition: height 0.3s ease-out, margin 0.3s ease-out,
		padding 0.3s ease-out;
	margin-bottom: 15px;
}

/* Progress Message Styling - used in index.html*/
#progressMessage p {
	font-size: 1.2em;
	color: #fff;
}

#errorMessage p {
	font-size: 1.2em;
	color: #ff4d4d;
}

/* Ensure that the progress message and bar are hidden by default */
#progressMessage {
	display: none;
}

.progress-bar-container {
	display: none;
}

/* Show them when needed */
#progressMessage.show {
	display: block;
}

.progress-bar-container.show {
	display: block;
}

.action-buttons-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	padding: 15px 0;
}

.action-buttons-wrapper .view-ar-button {
	width: auto;
	margin: 0 auto;
	background-color: #fff !important;
}

.secondary-buttons {
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.secondary-buttons #editButton {
	background: #2196f3;
	color: #fff;
}

/* AR Button Styles */
.ar-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 20px !important;
}

/* 5(g). Style for buttons in upload container - used in upload container */
.upload-container button {
	padding: 10px 20px;
	font-size: 1em;
	cursor: pointer;
	background-color: #fff;
	color: #333;
	border: none;
	border-radius: 10px;
	margin-top: 5px;
}

.upload-container button:hover {
	transform: scale(1.02); /* Slight zoom effect on hover */
}

.upload-container input[type="file"] {
	display: none;
}

/* View in AR Button Container Styling - used in upload container */
#viewInARButton {
	padding: 8px 16px;
	font-size: 1em;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	gap: 10px;
}

#viewInARButton:hover {
	background-color: #e0e0e0 !important;
	color: #333 !important;
}

#viewInARButton:hover .arBtn__icon {
	transform: rotate(60deg) scale(1.1);
	transition: transform 0.5s ease;
}

#uploadAnotherButton {
	padding: 10px 20px;
	margin-top: 15px;
	font-size: 1em;
	cursor: pointer;
	background-color: #fff;
	color: #333;
	border: none;
	border-radius: 10px;
}

#uploadAnotherButton:hover {
	background-color: #e0e0e0;
}

/* 5(f). Scroll Down Container Styling - used in landing container */
.scroll-down-container {
	display: flex;
	justify-content: center; /* Center horizontally */
	margin-top: 20px; /* Space above the button */
}

/* Scroll Down Button Styling */
.scroll-down-button {
	position: fixed !important;
	bottom: 1vh;
	/* right: 50%; */
	/* transform: translateX(50%); */
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%); /* Safari support */
	border: none;
	border-radius: 50%; /* Circular shape */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
	position: relative;
	z-index: 2; /* Ensure it's above other elements */
}

/* Hover Effect */
.scroll-down-button:hover {
	background: rgba(255, 255, 255, 0.4); /* Increase opacity on hover */
	transform: translateY(5px); /* Slight downward movement */
}

/* Active/Click Effect */
.scroll-down-button:active {
	transform: translateY(2px); /* Slight movement on click */
}

/* SVG Icon Styling */
.scroll-down-button svg {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
}

/* Scroll down Animation (Optional) */
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(5px);
	}
	60% {
		transform: translateY(3px);
	}
}

.scroll-down-container:hover .scroll-down-button svg {
	animation: bounce 2s infinite;
}

@supports not (
	(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
) {
	.scroll-down-button {
		background: rgba(
			255,
			255,
			255,
			0.5
		); /* Solid background for unsupported browsers */
	}
}

/* Responsive style for scrolling on iPhone X and Above */
@media screen and (max-device-width: 812px) and (orientation: portrait) {
	.scroll-down-button {
		bottom: 2vh; /* Slightly higher to avoid overlap */
	}
}

/* Edit with AI Modal */

#editWithAIModal .generate-modal-content {
	padding: 60px 40px;
}

#editWithAIModal .generate-modal-header {
	padding-bottom: 20px;
}

.edit-ai-form {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.edit-form-left,
.edit-form-right {
    flex: 1;
    display: flex;
    flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
}

.edit-image-preview {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    margin-bottom: 10px;
}

#editPromptContainer label {
	font-size: 1.1rem;
	font-weight: bold;
	color: #333;
}

#editPromptContainer textarea {
	pointer-events: auto;
	cursor: text;
	width: 100%;
	height: 100px;
	padding: 10px;
	border-radius: 10px;
	resize: vertical;
	font-size: 16px;
	background: rgba(255, 255, 255, 0.2);
	color: #333;
	scrollbar-width: none;
}

#editPromptContainer textarea::placeholder {
	color: #333;
	font-size: 0.8rem;
}

#editPromptContainer .action-button {
	color: #fff;
}

#editPromptContainer .action-button {
	background:#22c55e;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
}

#editPromptContainer .action-buttons-container {
    text-align: center;
}

.progress-message {
    text-align: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 0;
    height: 100%;
    background-color: #22c55e;
    animation: progress 2s infinite;
}

#editPromptContainer .action-buttons-container {
	align-items: center;
}

@keyframes progress {
    0% { width: 0; }
    50% { width: 100%; }
    100% { width: 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .edit-ai-form {
        flex-direction: column;
    }

    .edit-form-left,
    .edit-form-right {
        width: 100%;
    }

	#editWithAIModal .generate-modal-content {
		padding: 30px;
	}

	#editPromptContainer .action-buttons-container {
		text-align: auto;
	}

    .edit-image-preview {
        max-height: 200px;
    }

    #editPrompt {
        height: 80px;
    }

	.edit-dropdown-menu {
		left: -30% !important;
	}
}

/* Edit Dropdown */
.edit-dropdown {
    position: relative;
    display: inline-block;
}

.edit-dropdown-button {
    background-color: #007bff !important; /* Blue to match the original Edit Image button */
    color: white !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.edit-dropdown-button i {
    transition: transform 0.3s ease;
}

.edit-dropdown-button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.edit-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%; /* Position above the button (drop-up) */
    left: 0;
    background-color: white;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    min-width: 200px;
}

.edit-dropdown-menu li {
    border-bottom: 1px solid #eee;
}

.edit-dropdown-menu li:last-child {
    border-bottom: none;
}

.edit-dropdown-menu .dropdown-item {
    background: none;
    border: none;
    padding: 10px 20px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #333;
    font-size: 14px;
}

.edit-dropdown-menu .dropdown-item:hover,
.edit-dropdown-menu .dropdown-item:focus {
    background-color: #f0f0f0;
}

/* Edit with AI Button (Blue) */
.edit-ai-button {
    background-color: #007bff; /* Blue to match the original Edit Image button */
    color: white;
}

/* Edit with Tools/Filters Button (Orange) */
.edit-tools-button {
    background-color: #ff6200; /* Orange to match the Upload another Image button */
    color: white;
}

#editPromptContainer .predefined-prompts {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap; /* In case screen size is small */
    justify-content: center;
}

#editPromptContainer .prompt-button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #333; /* Slightly darker than the main button */
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

#editPromptContainer .prompt-button:hover {
    background-color: #2196f3; /* Blue to match active states */
}

#editPromptContainer .prompt-button:active {
    background-color: #1976d2; /* Darker blue for click feedback */
}

/* ------------------------------------ */
/* ---------- Main section ------------ */
/* ------------------------------------ */

/* 6. Main Content Section Styling, - used after landing section */
.main-content {
	background-color: #c9b9a2; /* Default background color for mobile */
	padding: 40px 0;
	flex: 1 0 auto;
}

@media screen and (min-width: 768px) {
	.main-content {
		background-color: white; /* Background color for desktop users */
	}
	.menu-icon,
	.menu-icon::before,
	.menu-icon::after {
		background-color: #666 !important;
	}
	.previous-uploads-section,
	.popular-images-section {
		background-color: white !important;
	}
	.previous-uploads-title,
	.popular-images-title {
		font-size: 2em;
	}
}

/* 6(a). Style for the Previous Uploads Section - show after landing once user uploads */
.previous-uploads-section {
	padding: 0px 30px;
	background-color: #c9b9a2;
}

.popular-images-section {
	padding: 0px 35px;
	background-color: #c9b9a2;
}

/* Previous Uploads Container Styling */
.previous-uploads-container,
.popular-images-container {
	width: 90%;
	max-width: 1000px; /* Increased max-width to accommodate grid */
	margin: 30px auto; /* Space above and center alignment */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px; /* Space between grid items */
	/* display: none; */
}

.previous-uploads-container .upload-container-item {
	padding: 20px 30px;
}

.previous-uploads-title,
.popular-images-title {
	text-align: center;
	font-size: 1.5em;
	margin: 0; /* Space above and below */
	color: #333;
}

/* Responsive adjustments for the grid */
@media screen and (max-width: 900px) {
	.previous-uploads-container,
	.popular-images-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.previous-uploads-container,
	.popular-images-container {
		grid-template-columns: 1fr;
	}
}

/* 6(b). Individual Uploaded Container Styling in prev uploads */
.upload-container-item,
.popular-image-item {
	position: relative; /* For positioning the buttons */
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 20px 40px;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
	cursor: pointer; /* Indicate that the item is clickable */
	overflow: hidden; /* To contain the blur effect */
	opacity: 0;
	/* transform: translateY(20px); */
	animation: fadeInUp 2s forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.upload-container-item.active .uploaded-image {
	filter: blur(2px);
	transition: filter 2s ease;
}

.popular-image-item:hover {
	transform: scale(1.02) !important;
}

/* Styles for the overlay buttons in prev section grid */
.upload-buttons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none; /* Hidden by default */
	flex-direction: column;
	align-items: center;
	padding: 10px;
	border-radius: 8px;
	z-index: 10; /* Ensure buttons appear above other elements */
	width: max-content;
}

.upload-container-item.active .upload-buttons,
.popular-image-item {
	display: flex; /* Show buttons when active */
	flex-direction: column;
	width: max-content;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%); /* Safari support */
}

.popular-image-item {
	backdrop-filter: saturate(150%) !important;
	-webkit-backdrop-filter: saturate(150%) !important; /* Safari support */
}

/* Uploaded Image Styling within Previous Uploads */
.upload-container-item img,
.popular-image-item img {
	width: 100%;
	max-width: 250px; /* Limit the size of the image */
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	margin-bottom: 10px;
}

/* Uploaded image name */
.upload-image-name {
	font-size: large;
	font-weight: bold;
	color: #666;
	margin: 0px 0px 20px 0px !important;
	text-align: center;
}

/* Popular images add to cart button */

/* Styling for popular image items */
.popular-image-item {
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust based on your grid layout */
    max-width: 300px; /* Example max-width, adjust as needed */
}

/* Container for buttons */
.popular-image-item .image-actions {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    align-items: center;
    gap: 5px;
	z-index: 100;
}

.popular-image-item .image-actions .edit-poster,
.popular-image-item .image-actions .buy-poster {
	width: max-content !important;
}

/* Show buttons on hover for desktop */
@media (min-width: 769px) {
    .popular-image-item:hover .image-actions {
        display: flex;
    }
}

/* Always visible on mobile */
@media (max-width: 768px) {
    .popular-image-item .image-actions {
        display: flex; /* Always visible on mobile */
        position: static; /* Remove absolute positioning */
        transform: none; /* Reset transform */
        background: none; /* Remove background for mobile */
        box-shadow: none; /* Remove shadow for mobile */
        padding: 10px 0; /* Adjust spacing */
    }
}

/* Common button base styles */
.buy-poster {
	margin: 10px;
	padding: 12px 24px;
	background: #22c55e;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* View Homepage Button - Keep it as overlay */
.view-homepage-button {
	margin: 5px;
	padding: 10px 15px;
	background: #2196f3;
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.upload-container-item .image-container {
	position: relative;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	justify-content: center;
}

.upload-container-item .view-homepage-button {
	z-index: 4;
	width: max-content;
}

.upload-container-item .image-link {
	display: flex;
	justify-content: center;
	width: 100%;
}

.upload-container-item img {
	width: 100%;
	height: auto;
	display: block;
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/* Desktop styles for both sections */
@media (hover: hover) and (pointer: fine) {
	/* Common styles for both containers */
	.upload-container-item,
	.popular-image-item {
		position: relative;
		overflow: hidden;
	}

	/* Image and link styles */
	.image-container,
	.image-link {
		position: relative;
		z-index: 3;
		display: block;
		width: 100%;
	}

	.uploaded-image,
	.popular-image-item img {
		width: 100%;
		height: auto;
		object-fit: contain;
		display: block;
		margin: 0 auto;
	}

	/* Hover overlay styles */
	.upload-container-item:hover::after,
	.popular-image-item:hover::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			transparent 40%,
			rgba(0, 0, 0, 0.5)
		);
		opacity: 1;
		z-index: 1;
		transition: 0.3s ease;
	}

	/* Button styles for previous uploads */
	.action-buttons {
		display: none;
	}

	.upload-buttons.desktop-only {
		display: none;
		position: absolute;
		top: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 4;
		padding: 0 25px;
		flex-direction: column;
		gap: 10px;
		width: max-content;
	}

	.upload-container-item:hover .upload-buttons.desktop-only {
		display: flex;
		gap: 50px;
	}

	/* Buy button styles for popular section */
	.popular-image-item .buy-poster {
		position: absolute;
		bottom: 20px;
		width: max-content;
		transform: translateY(100%);
		opacity: 0;
		box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
		transition: all 0.3s ease;
	}

	.popular-image-item .image-actions .edit-poster {
        position: relative;
        bottom: 70px !important;
        width: max-content;
	}

	.popular-image-item:hover .buy-poster {
		opacity: 1;
		transform: translateY(0);
	}

	.popular-image-item .buy-poster:active {
		transform: translateY(0) !important;
	}
}

/* Mobile styles */
@media (hover: none), (pointer: coarse) {
	/* Previous uploads section specific fixes */
	.upload-container-item {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 15px;
		position: relative;
	}

	.upload-image-name {
		margin: 0px 0px 10px 0px !important;
	}

	.upload-device-type {
		margin-bottom: 0px;
	}

	.upload-buttons.desktop-only {
		display: none;
	}

	.image-container {
		width: 100%;
		position: relative;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	.upload-buttons.mobile-only {
		position: relative; /* Change from absolute to relative */
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 10px;
		background: transparent;
	}

	.upload-time {
		order: -1; /* Keep upload time at top */
	}

	/* Popular images section */
	.popular-image-item .buy-poster {
		position: relative;
		opacity: 1;
		transform: none;
		width: calc(100% - 20px);
	}
}

/* Enhanced hover effects */
.buy-poster:hover {
	background: #25d467;
	box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
	transform: translateY(-2px);
}

.buy-poster:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 10px rgba(76, 175, 80, 0.2);
}

/* Hover effects for all buttons */
.view-homepage-button:hover {
	background: #1976d2 !important;
}

.buy-poster:active,
.view-homepage-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(76, 175, 80, 0.2);
}

/* Icon animations */
.buy-poster i,
.view-homepage-button i {
	font-size: 18px;
	transition: transform 0.3s ease;
}

.buy-poster:hover i,
.view-homepage-button:hover i {
	transform: scale(1.1);
}

/* 6(c). Styles for each grid image item elements */
/* Uploaded Time Styling in prev upload grid items */
.upload-time,
.edit-time {
	font-size: 0.9em;
	color: #666;
	margin-top: 10px;
	margin-bottom: 10px;
	text-decoration: underline;
	text-align: center;
	z-index: 4;
}

.edit-time {
	margin-top: 5px;
}

.upload-time time,
.upload-time span {
	cursor: pointer;
}

.upload-time time:hover,
.upload-time span:hover {
	color: #333;
}

/* Upload Status Generated/Uploaded, Device type for uploads */
.upload-device-type {
	font-size: 0.9em;
	color: #fff;
	margin-top: 0px;
	background-color: #999;
	border-radius: 20px;
	padding: 10px;
	display: block;
}

/* 6(d). View on Homepage/AR space buttons - used on grid item image hovers */
.view-ar-button,
.edit-image-button,
.login-to-edit-button {
	margin: 5px;
	padding: 8px 12px;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 14px;
	transition: background-color 0.3s ease;
}

.login-to-edit-button {
	background-color: #22c55e; /* Green */
}

.login-to-edit-button:hover {
	background-color: #25d467;
}

.login-to-edit-button {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.view-ar-button {
	background-color: #2196f3 !important; /* Blue */
}

.view-ar-button:hover {
	background-color: #0b7dda !important;
}

.edit-image-button {
	background-color: #444;
}

.edit-image-button:hover {
	background-color: #333;
}

/*6(e). Style for the "See all Uploads" button - used after 3x2 image grid */
.see-all-uploads,
.see-all-posters {
	display: block;
	margin: 20px auto;
	padding: 10px 20px;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	background-color: #22c55e;
	color: #fff;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.see-all-uploads:hover,
.see-all-posters:hover {
	background-color: #25d467;
}

/* Wrapper to center the "See all Uploads" button */
.guest-buttons-container {
	width: 100%; /* Ensure it spans the full width of the parent */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 20px; /* Space above the button */
}

/* ------------------------------------ */
/* ---------- Informative section ----- */
/* ------------------------------------ */

/* 7. Informative Content Section Styling - used after prev uploads section */
.informative-content-section {
	padding: 20px 20px;
	background-color: #c9b9a2; /* Match Previous Uploads Section */
}

@media screen and (min-width: 768px) {
	.informative-content-section {
		background-color: white; /* Change to white for desktop */
	}
}

.informative-content-title {
	text-align: center;
	font-size: 2em;
	margin-bottom: 20px;
	color: #333;
}

.informative-content-section p,
.informative-content-section ol,
.informative-content-section ul {
	font-size: 1.1em;
	line-height: 1.6;
	color: #555;
	max-width: 900px;
	margin: 0 auto 20px auto;
}

.informative-content-section ol ul {
	padding-left: 20px;
	max-width: 800px;
}

/* 7(a). Informative Content Items */
.informative-content-items {
	margin: 20px auto;
	max-width: 1000px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	/* margin-top: 30px; */
}

.informative-item {
	background: rgba(255, 255, 255, 0.1);
	/* backdrop-filter: blur(20px) saturate(110%); */
	/* -webkit-backdrop-filter: blur(20px) saturate(110%); */
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}

.informative-item:hover {
	transform: scale(1.02);
}

.informative-text {
	flex: 1;
	padding: 10px;
}

.informative-text h3 {
	font-size: 1.3em;
}

.informative-image {
	flex: 1;
	padding: 10px;
}

.informative-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 7(b). Responsive layout for informative items */
@media screen and (min-width: 768px) {
	.informative-content-items {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.informative-item {
		margin-top: 20px;
		flex: 0 1 48%; /* Two items per row with some gap */
		flex-direction: row;
		align-items: center;
	}

	.informative-item:nth-child(even) {
		flex-direction: row-reverse; /* Alternate the order */
	}

	.informative-text,
	.informative-image {
		flex: 1;
		padding: 20px;
	}

	.informative-text {
		padding-right: 20px;
	}

	.informative-image {
		padding-left: 20px;
	}
}

@media screen and (max-width: 768px) {
	.informative-content-items {
		flex-direction: column;
		align-items: center;
	}

	.informative-item {
		flex-direction: column;
		width: 100%;
	}
}

/* FAQ Section */
.faq-answer {
    display: block; /* Explicitly set to block */
    padding: 15px; /* Ensure it has padding */
    background-color: #fff; /* Ensure background color if needed */
    color: #555; /* Ensure text color */
    font-size: 1rem; /* Adjust as needed */
    line-height: 1.5; /* Adjust as needed */
    /* Add margin-top if needed for spacing from question */
    margin-top: 5px;
}

.faq-section {
	margin-top: 50px;
}

.faq-container {
	margin: 20px auto;
	max-width: 800px;
}

.faq-item {
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.faq-question {
	background-color: #f9f9f9;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.3s;
}

.faq-question:hover {
	background-color: #f1f1f1;
}

.faq-question h3 {
	margin: 0;
	font-size: 1.2rem;
	color: #333;
}

.faq-toggle-icon {
	font-size: 1.5rem;
	color: #666;
	transition: transform 0.3s;
}

.faq-answer {
	display: none;
	padding: 15px;
	background-color: #fff;
	color: #555;
	font-size: 1rem;
	line-height: 1.5;
}

.faq-item.open .faq-answer {
	display: block;
}

.faq-item.open .faq-toggle-icon {
	transform: rotate(45deg);
}

@media screen and (max-width: 760px) {
	.faq-question {
		background-color: #c9b9a2;
	}
}

/* ------------------------------------ */
/* ---------- Uploads Page elements --- */
/* ------------------------------------ */

/* 8. Uploads Page Styling */
.uploads-page {
	max-width: 1500px;
	height: 100%;
	margin: 0 auto;
	padding: 20px;
	background-color: white; /* Matches the style of the homepage */
}

.uploads-page {
	min-height: calc(100vh - 10px);
	display: flex;
	flex-direction: column;
}

.uploads-title {
	text-align: center;
	font-size: 1.8em;
	margin-top: 20px; /* Prevents overlap with navbar */
	color: #333;
	margin-bottom: 15px !important;
}

.no-uploads-container {
	text-align: center;
	padding: 50px;
	max-width: 600px;
	margin: 0 auto;
}

.no-uploads-icon {
	width: 150px;
	height: 150px;
	fill: #22c55e; /* Green color */
	animation: float 2s infinite ease-in-out;
}

.no-uploads-title {
	font-size: 1.5em;
	margin: 20px 0 10px;
	color: #333;
}

.no-uploads-text {
	font-size: 1em;
	color: #666;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}
.no-uploads-icon {
	animation: pulse 2s infinite ease-in-out;
}

.uploads-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
	/* padding: 0 20px;
    width: 90%; */
	max-width: 1200px;
	margin: 40px auto;
}

.upload-buttons-wrapper,
.popular-images-button-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

/* Adjust grid layout for smaller screens */
@media screen and (max-width: 900px) {
	.uploads-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.uploads-container {
		grid-template-columns: 1fr;
	}
	.uploads-title {
		margin-top: 60px !important;
	}
}

/* Additional Styling for Uploads Page Buttons */
.login-to-save-button,
.go-home-button {
	margin: 5px;
	padding: 8px 12px;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 14px;
	transition: background-color 0.3s ease;
}

.go-home-button {
	background-color: #2196f3;
}
.go-home-button:hover {
	background-color: #0b7dda !important;
}

.login-to-save-button {
	background-color: #22c55e;
}

.login-to-save-button:hover {
	background-color: #25d467;
}
/* Consistent styling for buttons and other elements in image grid item */
/* Same as 6(c) and 6(d) from prev uploads section */

/* --- Filter Buttons Styles --- */

.filter-buttons-container {
	display: flex;
	gap: 10px;
	margin: 30px auto 20px auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.filter-button,
.sort-button {
	padding: 10px 20px;
	color: #333;
	background-color: #f0f0f0;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-size: 16px;
	border-radius: 20px;
}

.sort-button {
	background-color: #4285f4;
	color: #fff;
}

.filter-button:hover {
	background-color: #dcdcdc;
}

.filter-button.active-filter {
	background-color: #22c55e;
	color: #fff;
}

.download-edited-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background-color: #22c55e !important;
	color: white !important;
	border: none;
	padding: 8px 16px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.download-edited-button:hover {
	background-color: #25d467 !important;
}

.privacy-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 20px;
	width: 40px;
    height: 40px;
    padding: inherit;
	border-radius: 50%;
	border: none;
    transition: color 0.3s ease;
}


/* ------------------------------------ */
/* ---------- Responsive elements ----- */
/* ------------------------------------ */

/* 9. Site wise responsive design for small phones and desktop devices */
/* 9(a). Adjusting slideshow, upload container sizes for small phones(<~ 5 inch) */
@media screen and (max-width: 380px) {
	.slideshow-container,
	.uploaded-image-container {
		margin-top: 10vh;
		width: 35vw;
		max-height: 50vh;
		margin-bottom: 10px;
	}

	.upload-container {
		width: 80% !important;
		padding: 10px;
	}

	.scroll-down-container {
		display: none;
	}

	.slideshow-container {
		display: none !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 1025px) {
	.slideshow-container,
	.uploaded-image-container {
		margin-top: 0vh;
		width: 40vw;
	}

	.slideshow-container {
		display: none !important;
	}

	.upload-container {
		padding: 10px;
	}
}

/* 9(b). Responsive Adjustments for Landscape Orientation - Square devices */
@media screen and (min-aspect-ratio: 1/1) {
	.landing::before {
		background: #c9b9a2 url("../images/bg/background_16_9.webp") no-repeat
			center center;
		background-size: cover;
	}

	/* Adjusting slideshow and upload container sizes for landscape */
	.slideshow-container,
	.uploaded-image-container {
		margin-top: 10vh;
		width: 20vw;
		max-height: 60vh;
		margin-bottom: 20px; /* Space below */
	}

	.upload-container {
		width: fit-content !important;
		margin: 20px auto 0 auto; /* Center and add top margin */
	}

	/* Adjust main-content background color within landscape */
	.main-content {
		background-color: white; /* Ensure consistency in landscape */
	}
	.menu-icon,
	.menu-icon::before,
	.menu-icon::after {
		background-color: #666 !important;
	}
	.previous-uploads-section,
	.popular-images-section {
		background-color: white !important;
	}
	.previous-uploads-title,
	.popular-images-title {
		font-size: 2em;
	}
}

/* 9(c). Additional Adjustments for Very Wide Screens - Laptop, TV like devices*/
@media screen and (min-width: 1200px) {
	.slideshow-container,
	.uploaded-image-container {
		margin-top: 5vh;
		width: 24vw;
		max-height: 80vh;
	}

	.upload-container {
		margin-top: 5px;
		padding-top: 10px;
		/* width: 35vw; */
	}
}

.ar-message {
  text-align: center;
  margin-top: 8px;
  font-size: 1rem;
  color: #333;
}