/* Wax Paper Designer – patterns */

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

.builder-area .main-paper-box {
	position: relative;
	margin: 0 auto;
	padding: 0 !important;
	overflow: hidden;
	box-sizing: border-box;
}

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

.builder-area #logoContainer.styles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	transform: none;
}

.builder-area #logoContainer .prent-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	position: relative;
}

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

.builder-area #logoContainer .logo-box img {
	max-width: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transform-origin: center center;
}

/* Standard patterns – fill full paper, anchored top-left */
#logoContainer.pattern1,
#logoContainer.pattern2 {
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}

/* Extended patterns – wider/taller than paper, centered so both halves fill */
#logoContainer.pattern3,
#logoContainer.pattern4,
#logoContainer.pattern5,
#logoContainer.pattern6,
#logoContainer.pattern7,
#logoContainer.pattern9 {
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
}

/* Pattern 1 – 10×10 */
#logoContainer.pattern1 .prent-logo {
	width: calc(100% / 10) !important;
	height: calc(100% / 10);
	padding: 1px;
}

/* Pattern 2 – 5×5 */
#logoContainer.pattern2 .prent-logo {
	width: calc(100% / 5) !important;
	height: calc(100% / 5);
	padding: 1px;
}

/* Pattern 3 – half-drop columns */
#logoContainer.pattern3 {
	width: calc(100% + (100% / 13)) !important;
	height: calc(100% + (100% / 9)) !important;
}

#logoContainer.pattern3 .prent-logo {
	width: calc(100% / 13) !important;
	height: calc(100% / 17);
}

#logoContainer.pattern3 .prent-logo img {
	max-width: 45px;
}

#logoContainer.pattern3 .prent-logo:nth-child(2n) {
	opacity: 0;
}

/* Pattern 4 – brick */
#logoContainer.pattern4 {
	width: calc(100% + (100% / 8)) !important;
	height: calc(100% + (100% / 5)) !important;
}

#logoContainer.pattern4 .prent-logo {
	width: calc(100% / 9) !important;
	height: calc(100% / 6);
}

#logoContainer.pattern4 .prent-logo:nth-child(2n) {
	opacity: 0;
}

/* Pattern 5 – wide brick */
#logoContainer.pattern5 {
	width: calc(100% + (100% / 13)) !important;
	height: calc(100% + (100% / 12)) !important;
}

#logoContainer.pattern5 .prent-logo {
	width: calc(100% / 13) !important;
	height: calc(100% / 13);
}

#logoContainer.pattern5 .prent-logo img {
	max-width: 45px;
}

#logoContainer.pattern5 .prent-logo:nth-child(2n) {
	opacity: 0;
}

/* Pattern 6 – diagonal */
#logoContainer.pattern6 {
	width: calc(100% + (100% / 13)) !important;
	height: calc(100% + (100% / 12)) !important;
}

#logoContainer.pattern6 .prent-logo {
	width: calc(100% / 9) !important;
	height: calc(100% / 8);
	transform: rotate(-45deg);
}

#logoContainer.pattern6 .prent-logo img {
	max-width: 45px;
}

/* Pattern 7 – tilted dense */
#logoContainer.pattern7 {
	width: calc(100% + (100% / 13)) !important;
	height: calc(100% + (100% / 12)) !important;
	transform: translate(-50%, -50%) rotate(2deg) !important;
	transform-origin: center center;
}

#logoContainer.pattern7 .prent-logo {
	width: calc(100% / 13) !important;
	height: calc(100% / 10);
}

#logoContainer.pattern7 .prent-logo img {
	max-width: 46px;
}

/* Pattern 8 – single logo center */
#logoContainer.pattern8 {
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

#logoContainer.pattern8 .prent-logo {
	display: none !important;
	width: 50% !important;
	height: 50% !important;
	position: static !important;
	transform: none !important;
}

#logoContainer.pattern8 .prent-logo:first-child {
	display: flex !important;
}

#logoContainer.pattern8 .prent-logo img {
	max-width: 100%;
}

/* Pattern 9 – diagonal sparse */
#logoContainer.pattern9 {
	width: calc(100% + (100% / 13)) !important;
	height: calc(100% + (100% / 12)) !important;
}

#logoContainer.pattern9 .prent-logo {
	width: calc(100% / 13) !important;
	height: calc(100% / 13);
	transform: rotate(-45deg);
}

#logoContainer.pattern9 .prent-logo img {
	max-width: 45px;
}

#logoContainer.pattern9 .prent-logo:nth-child(2n) {
	opacity: 0;
}

.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;
	}

	.builder-area #logoContainer .logo-box img {
		max-width: 70px;
	}

	#logoContainer.pattern3 .prent-logo img {
		max-width: 30px;
	}
}