.dowomz-wrap {
	position: relative;
	width: 100%;	
	overflow: hidden;
}
/* Simple CSS-only "fullscreen" popup — avoids the native Fullscreen
   API entirely (which can silently fail inside iframes, under some
   security headers, or without a direct click gesture). Toggled by
   JS adding/removing this class on .dowomz-wrap. !important is
   required to beat Elementor's own per-instance inline style for
   the panel's "Container Height" setting. */
.dowomz-wrap.dowomz-popup-open {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	z-index: 999999 !important;
	background: #ffffff !important;
	margin: 0 !important;
}
body.dowomz-body-lock {
	overflow: hidden !important;
}

.dowomz-viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	text-align:center;
}
.dowomz-viewport.dragging {
	cursor: grabbing;
}
.dowomz-img {
	/* Always exactly fills the viewport at scale 1, so at any scale > 1
	   it reliably overflows in both directions and can be panned. */
	width: auto !important;
	height:700px !important;
	transform-origin: 0 0;
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	max-width: none;
	display:inline-block;;
}

/* Desktop: buttons centered on the right edge (overlay). */
.dowomz-controls {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 10;
	top: 50%;
	right: 24px;
	left: auto;
	bottom: auto;
	transform: translateY(-50%);
}

/* Mobile: buttons move to the bottom-right corner instead of being
   vertically centered, to leave room for the drag-guide image on
   the left. --dowomz-mobile-bottom is set inline per-instance from
   the "Mobile: Offset from Bottom Edge" control. */
@media (max-width: 1024px) {
	.dowomz-controls {
		top: auto;
		bottom: var(--dowomz-mobile-bottom, 16px);
		transform: none;
	}
}

/* Drag-guide image: purely decorative, non-clickable hint shown only
   on mobile, on the left side, vertically centered. Hidden on
   desktop/tablet entirely. */
.dowomz-drag-guide {
	display: none;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.dowomz-drag-guide-default {
	color: #ffffff;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.dowomz-controls button {
	
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;	
	transition: background 0.2s, transform 0.15s;
	padding: 0;
}
.dowomz-controls button:hover {
	background: none;
	
}
.dowomz-controls button:active {
	background: none;
}

/* Popup-open override: image fills the whole screen instead of the
   fixed 700px height used in the normal (in-page) view. */
.dowomz-wrap.dowomz-popup-open .dowomz-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	display: block;
}

/* Close (×) button shown only while the popup is open.
   !important on both display rules: some themes/plugins apply a
   global "button { display: ... !important; }" reset that would
   otherwise beat a plain display:none and leave this visible
   at all times, even when the popup is closed. */
.dowomz-close-btn {
	position: absolute !important;
	top: 20px;
	left: 20px;
	z-index: 20;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #ffffff;
	color: #222;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: none !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dowomz-wrap.dowomz-popup-open .dowomz-close-btn {
	display: flex !important;
}
@media (max-width: 1024px) {
	.dowomz-drag-guide {
		display: block;
		position: absolute;
		top: 50%;
		left: 16px;
		transform: translateY(-50%);
		z-index: 10;
		width: 60px;
		height: auto;
	}
	.dowomz-wrap.dowomz-popup-open .dowomz-img, .dowomz-img  {height: auto !important;}
	.dowomz-viewport{padding-bottom:80px;}
	.dowomz-controls{width:50%; flex-direction: row; justify-content: right;}
	.dowomz-btn-fullscreen{display:none !important;}
	.dowomz-drag-guide{top:auto !important; bottom:6px !important;}
}