/**
 * 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.
 */

/* =========================================================================
   Elementor widget element — propagate height down the flex chain
   ========================================================================
   When this widget sits inside an Elementor Container (flex/grid), the
   container's height is distributed to .elementor-widget via flex-stretch.
   However, Elementor's own .elementor-widget-container (the div it wraps
   every widget in) defaults to height: auto, which breaks the percentage-
   height chain before it can reach .ka-image-zoom-wrapper.

   These rules re-connect the chain without touching anything outside the
   widget's own element tree:
     .elementor-widget-ka-image-zoom          — the widget root flex cell
       └── .elementor-widget-container        — made a flex column, height: 100%
             └── .ka-image-zoom-wrapper       — flex: 1 so it grows to fill
   ====================================================================== */

.elementor-widget-ka-image-zoom {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.elementor-widget-ka-image-zoom > .elementor-widget-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.elementor-widget-ka-image-zoom > .elementor-widget-container > .ka-image-zoom-wrapper {
	flex: 1 1 auto;
}

/* =========================================================================
   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 {
	/* Absolutely fill the wrapper so transform-origin:center center resolves
	   to the wrapper's visual center — not the content height of the image.
	   Without this, height:100% fails to inherit the wrapper's flex-stretched
	   height, causing the inner to shrink-wrap the image (e.g. 88px instead of
	   422px), which shifts transform-origin and breaks drag boundaries. */
	position: absolute;
	inset: 0;
	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;
}