:root {
	--bg-color: #e0e7ff;
	--fg-color: #0f2369;
	--primary-font: "Cairo", sans-serif;
}

/* Remove autofill highlight (Replaced with white bg, needs fix) */
input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0px 9999px white;
}

input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 50px white inset;
}

* {
	font-family: var(--primary-font);
}

textarea {
	resize: none;
	overflow: hidden;
}

i {
	scale: 1.5;
	margin: 0 0 0 10px;
}

body {
	background-color: var(--bg-color);
	color: var(--fg-color);
	margin: 0;
	padding: 130px 20px 100px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	position: fixed;
	top: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 95%;
	height: 100px;
	background-color: rgba(224, 231, 255, 0.95);
	color: var(--fg-color);
	padding: 0 3%;
	box-sizing: border-box;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	margin-bottom: 40px;
	border-radius: 15px;
	z-index: 10;
}

header .company-logo {
	height: 80%;
}

header h1 {
	font-size: 1.5rem;
	margin: 0;
}

.title {
	margin-bottom: 0;
}

.phone-warn {
	color: red;
	display: none;
}

.description {
	margin-top: 0;
	margin-bottom: 30px;
}

/* --- WORKSPACE (What you see while editing) --- */
#scrollable-view {
	width: 90%;
	max-width: 1400px;
	aspect-ratio: 1.414 / 1;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#workspace-container {
	/* On screen, we keep it flexible */
	/* width: 90%; */
	/* max-width: 1400px; */
	/* Prevent it from getting too huge on big monitors */
	aspect-ratio: 1.414 / 1;
	margin: 0 auto;
	position: relative;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	/* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
	background-color: white;
	container-type: size;
}

/* --- INPUTS --- */
.input-field {
	position: absolute;
	background: rgba(0, 123, 255, 0.08);
	border: 1px dashed rgba(0, 0, 0, 0.3);
	font-size: 1.2cqh;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-align: start;
	padding: 2px;
	direction: rtl;
	transition: all 0.3s;
}

.input-field:focus {
	background: rgba(0, 123, 255, 0.2);
	border: 1px dashed #007bff;
	outline: none;
}

.input-field:hover {
	background: rgba(0, 123, 255, 0.2);
}

.input-field::placeholder {
	color: rgba(0, 0, 0, 0.2);
}

/* --- IMAGES --- */
.image-zone {
	position: absolute;
	border: 2px dashed #007bff;
	background: rgba(0, 123, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s;
}

.image-zone:hover {
	background: rgba(0, 123, 255, 0.2);
}

.image-zone:hover span {
	font-weight: 700;
}

.image-zone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Keeps image aspect ratio */
	display: none;
}

.image-zone span {
	color: #007bff;
	font-size: 1.5cqh;
	font-weight: 600;
	pointer-events: none;
	transition: all 0.3s;
}

/* --- BEFORE-PRINTING NOTES --- */
p.print-notes {
	margin-top: 50px;
	margin-bottom: 0;
}

ul.print-notes {
	text-align: start;
	margin-top: 10px;
}

/* --- BUTTONS --- */
.button-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

button {
	cursor: pointer;
	border: none;
	border-radius: 10px;
	padding: 15px 40px;
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.4s;
}

.save-btn, .choose-btn {
	background-color: var(--fg-color);
	color: white;
}

.save-btn:hover, .choose-btn:hover {
	background-color: #264fe3;
	transform: scale(1.05);
}

.reset-btn {
	background-color: white;
	color: var(--fg-color);
}

.reset-btn:hover {
	background-color: #afc0ff;
	transform: scale(1.05);
}

/* Text Alignment & Size */
.tx-centerx {
	text-align: center;
}

.tx-ltr {
	text-align: left;
}

.tx-small {
	font-size: 1cqh;
}

.tx-large {
	font-size: 2.5cqh;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media screen and (max-width: 900px) {
	header {
		flex-direction: column;
		justify-content: center;
	}

	header h1 {
		display: none;
	}

	.phone-warn {
		display: block;
	}

	#scrollable-view {
		overflow-y: hidden;
		overflow-x: scroll;
		height: 296mm;
		width: 100%;
	}

	#workspace-container {
		width: 420mm;
		height: 296mm;
	}
}

/* ==========================================================================
	PRINTING METHOD (Overrides everything above when you print)
========================================================================== */
@media print {

	/* 1. Setup A3 Landscape Paper */
	@page {
		size: A3 landscape;
		margin: 0;
	}

	body {
		margin: 0 !important;
		padding: 0 !important;
		background: white !important;
		display: block !important;
		/* Reset flexbox layout */
	}

	/* 2. Hide Non-Print Elements */
	header,
	.title,
	.description,
	button,
	.print-notes {
		display: none !important;
	}

	#scrollable-view {
		overflow-y: hidden;
		overflow-x: hidden;
		width: 420mm !important;
		height: 296mm !important;
		box-shadow: none !important;
		max-width: none !important;
	}

	/* 3. Force Container to be EXACT A3 Size */
	#workspace-container {
		width: 420mm !important;
		height: 296mm !important;
		/* 296 to prevent "blank 2nd page" bug */
		margin: 0 !important;
		max-width: none !important;

		/* Force background image to print */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		page-break-after: avoid;
	}

	/* 4. Clean up Inputs (Remove borders) */
	.input-field {
		border: none !important;
		/* font-size: 10px !important; */
		/* Larger for print clarity */
		font-family: Arial, Helvetica, sans-serif !important;
		background-color: transparent !important;
	}

	.input-field:focus {
		background-color: transparent !important;
	}

	.input-field::placeholder {
		color: transparent !important;
	}

	.tx-small {
		/* font-size: 7px !important; */
	}

	/* 5. Clean up Images */
	.image-zone {
		border: none !important;
		background: transparent !important;
	}

	/* Hide the helper text if image is uploaded */
	.image-zone span {
		display: none !important;
	}
}