.wapf_canvas_wrapper, .lcp-wrap{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events: none; /* Pass pointer event to child for image zooming */
	overflow:hidden;
}

.lcp-wrap .lcp-inner .lcp-img img {
	vertical-align: bottom;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    display:block;
    max-width:100%;
    box-sizing: border-box;
    width:100%;
    height:100%;
    object-fit: cover;      /* 🔥 păstrează aspect ratio + umple box-ul */
	object-position: center;}

.lcp-wrap .lcp-inner .lcp-img img.scale {
	object-fit:contain;
}

.lcp-wrap .lcp-img img.cover{
	object-fit:cover;
}

.lcp-img img.scale,.lcp-img img.cover{
	width:100% !important;
	height:100% !important;
}

.wapf_canvas, .lcp-inner{
	position:absolute;
	top:0;
	left:0;
}
.wapf-canvas{
	max-height:100%;
	max-width:100%;
}
.wapf-canvas-zoom{
	opacity:0;
}

.woocommerce-product-gallery__image{position: relative;}

/* Fix for images but should really be in our core plugin*/
.wapf-field-img img{ vertical-align: bottom; }

.lcp-modal-inner {
	display: flex;
	column-gap: 1rem;
}

.lcp-modal input[type=range] {
	width: 100%; /* required in firefox to make custom styling work */
	-webkit-appearance: none;
	height: 6px;
	background: #ddd;
	border-radius: 6px;
	outline: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: #212121;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 4px rgba(0,0,0,.12);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: #212121;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 4px rgba(0,0,0,.12);
}

/* Edge */
input[type="range"]::-ms-thumb {
	width: 20px;
	height: 20px;
	background: #212121;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 4px rgba(0,0,0,.12);
}

.lcp-modal input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

.lcp-modal input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.lcp-modal-controls {
	display: flex;
	row-gap: 1rem;
	flex-flow:column;
	min-width: 265px;
}

.lcp-control {
	flex: 1;
}

.lcp-control-wrap {
	display: flex;
	column-gap: 10px;
}

.lcp-modal-overlay {
	align-items: center;
	background: rgba(0,0,0,.85);
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999999;
}

.lcp-modal {
	--lcp-margin-tb: max(12vh, 20px);
	--lcp-margin-lr: max(12vw, 20px);
	background: #fff;
	height: calc(100vh - var(--lcp-margin-tb)* 2);
	margin: var(--lcp-margin-tb) var(--lcp-margin-lr);
	overflow: hidden;
	padding: 30px;
	position: relative;
	touch-action: none;
	width: auto;
}

.lcp-modal-close button{
	background: transparent!important;
	border: none!important;
	padding: 0;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	display: inline-flex;
	color: #212121;
	position: absolute;
	top: 10px;
	right:10px;
}

.lcp-editor-preview {
	position: relative;
	user-select: none;
}

.lcp-editor-preview div img{
	vertical-align: bottom;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	display: block;
	max-width: none!important;
	box-sizing: border-box;
	cursor: move;
}

.moveable-control,.moveable-rotation-control{
	border:2px solid #212121!important;
	background:white!important;
	box-shadow: rgba(0, 0, 0, 0.12) 1px 2px 2px!important;
}

.moveable-line {
	height: 2px!important;
}

.moveable-rotation {
	background: var(--moveable-color) !important;
	width: 2px!important;
}

.lcp-dz-loader {
	display: none;
	align-items: center;
	justify-content: center;
	width: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid currentColor;
	border-right-color: transparent;
	animation: lcp_turn 1s infinite linear;
}

@keyframes lcp_turn {to{transform: rotate(1turn)}}

.lcp-editor {
	position: fixed;
	z-index: 99999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.45);
}

.lcp-editor-body{
	margin:25px;
	position:relative;
}

.lcp-editor button {
	position:relative;
	background:transparent;
	height:42px;
	border:none;
	margin:0;
	padding:0 15px;
	align-items:center;
	justify-content:center;
	color:currentColor;
	fill:currentColor;
	display: flex;
}

.lcp-editor button:hover {
	background: #eaeaea;
}

.lcp-editor button:focus, .lcp-editor button:active {
	outline: none;
}

.lcp-editor-inner {
	transform: translate( -50%, -35% );
	box-shadow: 0 0 15px rgba(0,0,0,.4);
	top: 35%;
	left: 50%;
	max-height: 85%;
	background: #fff;
	position: absolute;
	max-width: 85%;
	z-index: 99999;
}

.lcp-editor-footer, .lcp-footer-buttons, .lcp-footer-buttons > div {
	display: flex;
}

.lcp-editor-footer{
	align-items: center;
	background: #fff;
}

.lcp-footer-buttons{
	margin-left:auto;
}

.lcp-footer-buttons > div{
	flex-wrap:wrap;
}

.lcp-footer-info {
	padding:0 10px;
	font-size:85%;
	cursor: pointer;
}

.lcp-editor button svg {
	width:16px;
	height:16px;
}

.lcp-download-from-gallery {
	position: absolute!important;
	top: .875em;
	left: .875em;
	height: 2em!important;
	width: 2em!important;
	z-index: 99;
	align-items: center;
	justify-content: center;
	fill:currentColor;
	padding:0!important;
}

.lcp-open-editor{ display: none}
.lcp-open-editor, .lcp-open-editor:hover, .lcp-open-editor:active{
	color:currentColor;
	text-decoration: underline;
	outline: none;
}

.lcp-editor-info{
	font-weight: 600;
	padding:0 10px;
}

.lcp-base-img {
	pointer-events: none;
	display: block; /* themes like woodmart would otherwise not allow the draggable thing :/ */
	max-width: 500px !important;
	max-height: 100% !important;
}

}




	
@media all and (max-width:880px) {

	/* containerul din popup – îl facem să fie cât ecranul pe înălțime
	   și să centreze telefonul */
	.lcp-editor-preview {
		position: relative;
		width: 100%;
		height: calc(100vh - 180px); /* un pic de spațiu pentru butoane */
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	/* imaginea de bază (mockup-ul de husă) – full height, păstrează raportul */
	.lcp-base-img {
		height: 100% !important;
		width: auto !important;
		max-width: none !important;
	}

	/* layer-ul în care intră poza userului – îl forțăm să urmărească mockup-ul */
	.lcp-editor-preview .lcp-img {
		height: 100% !important;
		width: auto !important;
	}

	/* în popup nu ne mai interesează limitarea la 500px */
	.lcp-editor-inner {
		    max-width: 150% !important;
	}
	
	.lcp-editor-inner {

    max-width: fit-content !important;
 
}

}

@media (max-width: 880px) {
    body .lcp-editor .lcp-editor-inner {
        max-width: none !important;   /* sau poți pune none */
    }
}

@media (max-width: 880px) {
    .lcp-editor-inner {
        max-width: 95% !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
    }

    .lcp-editor-preview {
        max-height: 70vh !important;   /* reduce înălțimea zonei imaginii */
        overflow: hidden !important;
    }

    .lcp-editor {
        padding: 10px !important;
    }
}