/* Wax Paper Designer – pattern layouts matched to template1–9.jpg */

.builder-area .dimensions-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 8px 8px 28px;
	min-height: 0;
}

.builder-area .main-paper-box {
	position: relative;
	margin: 0 auto;
	padding: 0 !important;
	overflow: hidden;
	box-sizing: border-box;
	width: 480px !important;
	height: 480px !important;
	max-width: 100%;
}

.builder-area .logo-builder-area {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.builder-area #logoContainer.styles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--pattern-cols, 10), 1fr);
	grid-template-rows: repeat(var(--pattern-rows, 8), 1fr);
	align-content: stretch;
	justify-content: stretch;
	transform: none;
	transform-origin: center center;
}

.builder-area #logoContainer .prent-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 2%;
	position: relative;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	min-height: 0;
	overflow: visible;
}

.builder-area #logoContainer .logo-box {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}

.builder-area #logoContainer .logo-box img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transform-origin: center center;
	image-rendering: -webkit-optimize-contrast;
}

.builder-area #logoContainer.is-empty,
.builder-area #logoContainer.is-loading {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-content: center !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	transform: none !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.builder-area #logoContainer .paper-placeholder {
	margin: 0;
	padding: 0 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #666;
}

.builder-area #logoContainer.is-loading .paper-placeholder::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	border: 2px solid #cd9933;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: middle;
	animation: wax-paper-spin 0.8s linear infinite;
}

@keyframes wax-paper-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Shared pattern fills ---- */
#logoContainer.pattern1,
#logoContainer.pattern2,
#logoContainer.pattern3,
#logoContainer.pattern4,
#logoContainer.pattern5,
#logoContainer.pattern6,
#logoContainer.pattern7,
#logoContainer.pattern9 {
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* Staggered column patterns: extend height so offset tiles still fill paper */
#logoContainer.is-staggered {
	top: 50% !important;
	bottom: auto !important;
	height: calc(100% + (100% / var(--pattern-rows, 8))) !important;
	transform: translateY(-50%) !important;
}

#logoContainer.is-staggered .prent-logo[data-stagger="1"] {
	transform: translateY(50%);
}

/* 45° logo rotation (templates 6 & 9) */
#logoContainer.is-rotated-45 .prent-logo {
	transform: rotate(-45deg);
}

#logoContainer.is-staggered.is-rotated-45 .prent-logo[data-stagger="1"] {
	transform: translateY(50%) rotate(-45deg);
}

#logoContainer.is-rotated-45 .prent-logo {
	padding: 8%;
}

/* Pattern 1 – dense straight grid (template1: ~10×8) */
#logoContainer.pattern1 {
	--pattern-cols: 10;
	--pattern-rows: 8;
}

#logoContainer.pattern1 .prent-logo {
	padding: 1.5%;
}

/* Pattern 2 – 5×5 straight grid (template2) */
#logoContainer.pattern2 {
	--pattern-cols: 5;
	--pattern-rows: 5;
}

#logoContainer.pattern2 .prent-logo {
	padding: 4%;
}

/* Pattern 3 – dense half-drop (template3) */
#logoContainer.pattern3 {
	--pattern-cols: 12;
	--pattern-rows: 10;
}

#logoContainer.pattern3 .prent-logo {
	padding: 1%;
}

/* Pattern 4 – larger half-drop (template4) */
#logoContainer.pattern4 {
	--pattern-cols: 6;
	--pattern-rows: 6;
}

#logoContainer.pattern4 .prent-logo {
	padding: 5%;
}

/* Pattern 5 – sparse half-drop (template5) */
#logoContainer.pattern5 {
	--pattern-cols: 7;
	--pattern-rows: 7;
}

#logoContainer.pattern5 .prent-logo {
	padding: 6%;
}

/* Pattern 6 – 45° staggered (template6) */
#logoContainer.pattern6 {
	--pattern-cols: 8;
	--pattern-rows: 8;
}

/* Pattern 7 – dense half-drop + slight sheet tilt (template7) */
#logoContainer.pattern7 {
	--pattern-cols: 11;
	--pattern-rows: 10;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: 118% !important;
	height: calc(118% + (118% / 10)) !important;
	transform: translate(-50%, -50%) rotate(8deg) !important;
	transform-origin: center center;
}

#logoContainer.pattern7 .prent-logo {
	padding: 2%;
}

#logoContainer.pattern7 .prent-logo[data-stagger="1"] {
	transform: translateY(50%);
}

/* Pattern 8 – single logo dead-center (template8) */
#logoContainer.pattern8 {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-content: center !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}

#logoContainer.pattern8 .prent-logo {
	display: flex !important;
	width: 48% !important;
	height: 58% !important;
	max-width: 280px;
	max-height: 320px;
	padding: 0 !important;
	position: relative;
	transform: none !important;
}

#logoContainer.pattern8 .logo-box {
	width: 100%;
	height: 100%;
}

#logoContainer.pattern8 .logo-box img {
	max-width: 100% !important;
	max-height: 100% !important;
}

/* Pattern 9 – 45° sparse stagger (template9) */
#logoContainer.pattern9 {
	--pattern-cols: 7;
	--pattern-rows: 7;
}

#logoContainer.pattern9 .prent-logo {
	padding: 12%;
}

.builder-area .templates-box .template-img.active {
	outline: 3px solid #cd9933;
	outline-offset: 2px;
}

.builder-area .dimensions-box .width-box {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.builder-area .dimensions-box .height-box {
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

@media (max-width: 767.98px) {
	.builder-area .dimensions-box {
		padding: 10px 0;
		min-height: auto;
	}

	#logoContainer.pattern8 .prent-logo {
		width: 42% !important;
		height: 55% !important;
	}
}

/*
 * html2canvas capture: flatten transform-centered / tilted grids
 * into top-left offsets the renderer can paint reliably.
 */
.main-paper-box.wax-capture-mode {
	padding: 0 !important;
	overflow: hidden !important;
}

.main-paper-box.wax-capture-mode .logo-builder-area {
	overflow: hidden !important;
}

.main-paper-box.wax-capture-mode #logoContainer.is-staggered {
	top: calc(-50% / var(--pattern-rows, 8)) !important;
	left: 0 !important;
	transform: none !important;
	height: calc(100% + (100% / var(--pattern-rows, 8))) !important;
}

.main-paper-box.wax-capture-mode #logoContainer.pattern7 {
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) rotate(8deg) !important;
}