/* Formidable Image Layer Simulator — Frontend Styles */

/* ── Simulator stage wrapper ─────────────────────────────────────────────── */

.fils-stage-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 16px;
}

/*
 * Stage: height is controlled by JS via aspect-ratio (modern browsers) or
 * padding-bottom (legacy fallback). Both images — base and layer — are
 * absolutely positioned to fill this box identically at every viewport width.
 */
.fils-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f0f0f0;
}

/* ── Images inside the stage ─────────────────────────────────────────────── */

/*
 * Both base and layer images fill the exact same area so they always overlap
 * precisely, at any screen width. object-fit: contain preserves aspect ratio
 * and both images scale identically (no misalignment on resize).
 */
.fils-base-img,
.fils-layer-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.fils-layer-img {
	transition: opacity .3s ease;
}

/* ── Multiple (before/after) view layout ─────────────────────────────────── */

.fils-multi-wrap {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.fils-multi-wrap .fils-stage-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.fils-view-label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	text-align: center;
	margin-bottom: 4px;
}

@media ( max-width: 600px ) {
	.fils-multi-wrap {
		flex-direction: column;
	}

	/* Each panel takes full width when stacked */
	.fils-multi-wrap .fils-stage-wrap {
		width: 100%;
		max-width: 100% !important;
	}
}

/* ── Layer-field containers ──────────────────────────────────────────────── */

/*
 * Layer fields are hidden by default. When Formidable's conditional-logic JS
 * sets display:block on the container, our MutationObserver shows the matching
 * overlay image. The container itself must remain detectable (not display:none
 * via !important) so Formidable's toggle continues to work.
 *
 * height:0 + overflow:hidden collapses the container to zero visual footprint
 * when it is "shown" — the label and input are clipped and never visible.
 * We do NOT use display:none !important because that would prevent Formidable
 * from toggling visibility (and block our MutationObserver).
 */
.fils-layer-field {
	display: none;          /* initial: truly hidden                           */
	height: 0 !important;   /* when cond-logic sets display:block: no height   */
	min-height: 0 !important;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}