/* HQ Before/After Slider — Styles */

.hq-before-after {
	width:      100%;
	box-sizing: border-box;
}

.hq-ba-container {
	position:   relative;
	width:      100%;
	overflow:   hidden;
	background: #e5e7eb;
	cursor:     col-resize;
	user-select: none;
	touch-action: pan-y;   /* allow vertical scroll, intercept horizontal */
}

/* Images */
.hq-ba-img {
	position:        absolute;
	top:             0;
	left:            0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
	pointer-events:  none;
	user-select:     none;
}

/* Before clip wrapper */
.hq-ba-before-wrap {
	position: absolute;
	top:      0;
	left:     0;
	height:   100%;
	overflow: hidden;
	z-index:  1;
}

.hq-ba-before-wrap .hq-ba-img {
	position: absolute;
	width:    var(--hq-container-w, 100%);
	max-width: none;
}

/* Labels */
.hq-ba-label {
	position:    absolute;
	bottom:      16px;
	padding:     4px 12px;
	border-radius: 20px;
	font-size:   12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	pointer-events: none;
	z-index:     3;
	white-space: nowrap;
}

.hq-ba-label-before { left:  16px; z-index: 4; }
.hq-ba-label-after  { right: 16px; }

/* Handle */
.hq-ba-handle {
	position:  absolute;
	top:       0;
	bottom:    0;
	width:     0;
	z-index:   2;
	transform: translateX(-50%);
	display:   flex;
	flex-direction: column;
	align-items:    center;
	cursor:    col-resize;
}

.hq-ba-line {
	flex:            1;
	width:           2px;
	background:      var( --hq-handle-color, #ffffff );
	opacity:         0.9;
}

.hq-ba-knob {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      var( --hq-handle-color, #ffffff );
	box-shadow:      0 2px 12px rgba(0,0,0,0.25);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.hq-ba-handle:hover .hq-ba-knob,
.hq-ba-handle:focus .hq-ba-knob {
	transform:  translateY(-50%) scale(1.12);
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hq-ba-handle:focus {
	outline: none;
}
.hq-ba-handle:focus-visible .hq-ba-knob {
	outline: 3px solid #007cba;
	outline-offset: 3px;
}

/* Placeholder in editor when no images set */
.hq-ba-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f3f4f6;
	border:          2px dashed #d1d5db;
	color:           #6b7280;
	font-size:       0.95em;
}

/* Editor thumb preview */
.hq-ba-thumb {
	width:         100%;
	max-height:    120px;
	object-fit:    cover;
	border-radius: 4px;
	margin-bottom: 6px;
}
.hq-ba-picker { margin-bottom: 16px; }
.hq-ba-picker-label { font-weight: 600; font-size: 12px; margin-bottom: 6px; }

.hq-media-btn  { width:100%; justify-content:center; margin-bottom:8px; }

.hq-color-row  { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hq-color-label { flex:1; font-size:12px; font-weight:500; }
.hq-color-row input[type="color"] { width:40px; height:32px; padding:2px; border:1px solid #ccc; border-radius:4px; cursor:pointer; background:none; }