/**
 * GBP Compare Image Widget Styles
 */

/* ======================
   BASE CONTAINER
   ====================== */
.gbp-compare-image {
	position: relative;
	width: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

.gbp-compare-image__container {
	position: relative;
	width: 100%;
	cursor: grab;
}

.gbp-compare-image__container:active {
	cursor: grabbing;
}

/* Hover mode uses default cursor */
.gbp-compare-image--hover .gbp-compare-image__container {
	cursor: default;
}

/* Scroll mode uses default cursor */
.gbp-compare-image--scroll .gbp-compare-image__container {
	cursor: default;
}

/* ======================
   MOTION EFFECT
   ====================== */
.gbp-compare-image--motion .gbp-compare-image__container {
	transition: transform 0.3s ease-out;
	transform-style: preserve-3d;
	will-change: transform;
}

.gbp-compare-image--motion .gbp-compare-image__before,
.gbp-compare-image--motion .gbp-compare-image__after {
	transform: translateZ(0);
}

/* ======================
   IMAGES
   ====================== */
.gbp-compare-image__before,
.gbp-compare-image__after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.gbp-compare-image__after {
	position: relative;
}

.gbp-compare-image__before {
	z-index: 2;
	clip-path: inset(0 50% 0 0);
}

.gbp-compare-image__before img,
.gbp-compare-image__after img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	pointer-events: none;
}

/* Vertical orientation */
.gbp-compare-image--vertical .gbp-compare-image__before {
	clip-path: inset(0 0 50% 0);
}

/* ======================
   HANDLE
   ====================== */
.gbp-compare-image__handle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 100%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
	pointer-events: none;
}

.gbp-compare-image__handle-line {
	flex: 1;
	width: 2px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 10%, #ffffff 90%, rgba(255, 255, 255, 0) 100%);
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.gbp-compare-image:hover .gbp-compare-image__handle-line,
.gbp-compare-image.is-dragging .gbp-compare-image__handle-line {
	opacity: 1;
}

.gbp-compare-image__handle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	color: #ffffff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.2s ease, background-color 0.3s ease;
	pointer-events: auto;
	cursor: grab;
}

.gbp-compare-image__handle-icon:active {
	cursor: grabbing;
}

.gbp-compare-image:hover .gbp-compare-image__handle-icon,
.gbp-compare-image.is-dragging .gbp-compare-image__handle-icon {
	background-color: rgba(0, 0, 0, 0.7);
	transform: scale(1.1);
}

.gbp-compare-image__handle-icon svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Vertical handle */
.gbp-compare-image--vertical .gbp-compare-image__handle {
	top: 50%;
	left: 0;
	width: 100%;
	height: 0;
	flex-direction: row;
	transform: translateY(-50%);
}

.gbp-compare-image--vertical .gbp-compare-image__handle-line {
	flex: 1;
	width: auto;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 10%, #ffffff 90%, rgba(255, 255, 255, 0) 100%);
}

.gbp-compare-image--vertical .gbp-compare-image__handle-icon svg {
	transform: rotate(90deg);
}

/* ======================
   LABELS
   ====================== */
.gbp-compare-image__label {
	position: absolute;
	z-index: 5;
	padding: 8px 16px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border-radius: 20px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity 0.3s ease, visibility 0.3s ease;
	white-space: nowrap;
}

/* Hide labels when dragging */
.gbp-compare-image.is-dragging .gbp-compare-image__label {
	opacity: 0;
	visibility: hidden;
}

/* Label positions - Bottom (default) */
.gbp-compare-image--labels-bottom .gbp-compare-image__label--before {
	bottom: 20px;
	left: 20px;
}

.gbp-compare-image--labels-bottom .gbp-compare-image__label--after {
	bottom: 20px;
	right: 20px;
}

/* Label positions - Top */
.gbp-compare-image--labels-top .gbp-compare-image__label--before {
	top: 20px;
	left: 20px;
}

.gbp-compare-image--labels-top .gbp-compare-image__label--after {
	top: 20px;
	right: 20px;
}

/* Label positions - Center */
.gbp-compare-image--labels-center .gbp-compare-image__label--before {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.gbp-compare-image--labels-center .gbp-compare-image__label--after {
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

/* Vertical orientation labels */
.gbp-compare-image--vertical.gbp-compare-image--labels-bottom .gbp-compare-image__label--before {
	top: 20px;
	left: 50%;
	bottom: auto;
	transform: translateX(-50%);
}

.gbp-compare-image--vertical.gbp-compare-image--labels-bottom .gbp-compare-image__label--after {
	bottom: 20px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* ======================
   TOOLTIP
   ====================== */
.gbp-compare-image__tooltip {
	position: absolute;
	z-index: 25;
	padding: 8px 16px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	border-radius: 6px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	transform: translateX(-50%);
}

/* Show tooltip when visible class is added via JS */
.gbp-compare-image__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Hide tooltip while dragging */
.gbp-compare-image.is-dragging .gbp-compare-image__tooltip {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* ======================
   CENTER TITLE
   ====================== */
.gbp-compare-image__center-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	margin: 0;
	color: #ffffff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	white-space: nowrap;
}

/* Responsive center title */
@media (max-width: 767px) {
	.gbp-compare-image__center-title {
		font-size: 18px;
	}
}

/* ======================
   TRANSITIONS
   ====================== */
.gbp-compare-image__before,
.gbp-compare-image__handle {
	transition: none;
}

/* Smooth transition when not dragging (for initial position, etc.) */
.gbp-compare-image:not(.is-dragging) .gbp-compare-image__before,
.gbp-compare-image:not(.is-dragging) .gbp-compare-image__handle {
	transition: clip-path 0.1s ease, left 0.1s ease, top 0.1s ease;
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 767px) {
	.gbp-compare-image__handle-icon {
		width: 36px;
		height: 36px;
	}

	.gbp-compare-image__handle-icon svg {
		width: 14px;
		height: 14px;
	}

	.gbp-compare-image__label {
		font-size: 12px;
		padding: 6px 12px;
	}

	.gbp-compare-image__tooltip {
		font-size: 12px;
		padding: 8px 16px;
	}

	/* Mobile label positions - Bottom */
	.gbp-compare-image--labels-bottom .gbp-compare-image__label--before {
		bottom: 10px;
		left: 10px;
		right: auto;
	}

	.gbp-compare-image--labels-bottom .gbp-compare-image__label--after {
		bottom: 10px;
		right: 10px;
		left: auto;
	}

	/* Mobile label positions - Top */
	.gbp-compare-image--labels-top .gbp-compare-image__label--before {
		top: 10px;
		left: 10px;
		right: auto;
	}

	.gbp-compare-image--labels-top .gbp-compare-image__label--after {
		top: 10px;
		right: 10px;
		left: auto;
	}

	/* Mobile label positions - Center */
	.gbp-compare-image--labels-center .gbp-compare-image__label--before {
		left: 10px;
		right: auto;
	}

	.gbp-compare-image--labels-center .gbp-compare-image__label--after {
		right: 10px;
		left: auto;
	}
}