/**
 * KA Image Zoom – Structural & Base Styles
 *
 * Colors, sizes, and border-radius for the zoom buttons are injected
 * by Elementor via the widget's style controls (using `selectors`).
 * Only structural / layout rules live here.
 */

/* =========================================================================
   Wrapper — the visible container with hard clip
   ====================================================================== */

.ka-image-zoom-wrapper {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;        /* always fills the parent column height */
	min-height: 300px;   /* fallback floor — overridden by the Min Height control */
	overflow: hidden;
	/* Prevent text selection while dragging */
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	/* Hand all touch handling to JS */
	touch-action: none;
	/* Contain the stacking context so z-index on controls works */
	isolation: isolate;
}

/* =========================================================================
   Inner — centers the image and provides the drag surface
   ====================================================================== */

.ka-image-zoom-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: grab;
	cursor: -webkit-grab;
	/* Transform is applied by JS; transition provides smooth button-click zoom */
	transform-origin: center center;
	transition: transform 0.18s ease;
	will-change: transform;
}

.ka-image-zoom-inner.is-dragging {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}

/* =========================================================================
   Image — must never be constrained by theme resets
   ====================================================================== */

.ka-zoom-image {
	display: block;
	/* Override common theme rules that cap image width */
	max-width: none;
	max-height: none;
	/* Prevent the native browser drag ghost */
	pointer-events: none;
	-webkit-user-drag: none;
	/* Fill the inner container; object-position controlled by Elementor */
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =========================================================================
   Controls — stacked vertically, bottom-right corner
   ====================================================================== */

.ka-zoom-controls {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 0;           /* buttons touch — no gap between them */
	z-index: 10;
	/* Clip the shared background to the rounded card shape */
	overflow: hidden;
}

/* =========================================================================
   Buttons — structural only; colors injected by Elementor style controls
   ====================================================================== */

.ka-zoom-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	outline: none;
	cursor: pointer;
	line-height: 1;
	font-weight: 700;
	/* Smooth background-color transition on hover */
	transition: background-color 0.15s ease, color 0.15s ease;
	/* Prevent button press from triggering drag on the inner */
	pointer-events: all;
	/* Fallback size in case Elementor control is not set */
	width: 32px;
	height: 32px;
	font-size: 18px;
	background-color: #333333;
	color: #ffffff;
	/* Individual corner radii are controlled by Elementor border-radius selectors.
	   Fallback: no radius so flat joining edge is always square. */
	border-radius: 0;
}

/* Zoom-in button: top corners rounded (set via Elementor control or fallback) */
.ka-zoom-btn.ka-zoom-in {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Zoom-out button: bottom corners rounded + semi-transparent divider line on top */
.ka-zoom-btn.ka-zoom-out {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	position: relative;
}

/* Divider line between the two buttons */
.ka-zoom-btn.ka-zoom-out::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 1px;
	background-color: rgba( 255, 255, 255, 0.25 );
	pointer-events: none;
}

.ka-zoom-btn:focus-visible {
	/* Accessible focus ring */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}