/* -----------------------------
   BASE WRAPPER
------------------------------ */
.gform_wrapper .ginput_container_applicoreselfie .applicore-selfie-wrapper {
	position: relative;
	width: 100%;
	background: rgba( 0, 0, 0, 0.02 );
	display: grid;
	place-items: center;
	padding: 20px;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 2px;
	margin-bottom: 20px; /* Add some distance to the submit button below (or following field) */
}

/* -----------------------------
   CAMERA STAGE
------------------------------ */
.gform_wrapper .ginput_container_applicoreselfie .applicore-camera-stage {
	position: relative;
	overflow: hidden;
	margin-bottom: 12px;
}

/* -----------------------------
   VIDEO (camera layer)
------------------------------ */
.applicore-selfie-wrapper .applicore-camera {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* hidden by default (idle + preview) */
	display: none;
	z-index: 2;
}

/* show only in camera state */
.applicore-selfie-wrapper.camera-active .applicore-camera {
	display: block;
}

/* -----------------------------
   OVERLAY (oval guide)
------------------------------ */
.applicore-selfie-wrapper .applicore-selfie-overlay {
	position: absolute;
	inset: 0;

	display: none;
	align-items: center;
	justify-content: center;

	pointer-events: none;
	z-index: 4;
}

/* only during camera */
.applicore-selfie-wrapper.camera-active .applicore-selfie-overlay {
	display: flex;
}

/* -----------------------------
   PREVIEW IMAGE
------------------------------ */
.applicore-selfie-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;

	display: none;
	z-index: 2;
}

/* only in preview state */
.applicore-selfie-wrapper.preview-active .applicore-selfie-preview {
	display: block;
}

/* hide camera + overlay in preview */
.applicore-selfie-wrapper.preview-active .applicore-camera,
.applicore-selfie-wrapper.preview-active .applicore-selfie-overlay {
	display: none;
}

/* success message */
/* Cancelling, retaking etc will not respect this so do not use background or borders on this field. */
.applicore-selfie-success-message {
	display: none; /* Hidden by default opened by JS. */
	/* margin-top: -4px !important; */
	margin-bottom: 8px !important;
	font-size:.9em !important;
	text-align: center;
}

/* -----------------------------
   IDLE STATE (placeholder)
------------------------------ */
.applicore-selfie-wrapper .applicore-camera-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.04 );
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: var(--gf-radius);
	z-index: 1;
}
.applicore-selfie-wrapper .applicore-camera-placeholder-text {
	display:block;
	text-align: center;
	line-height: 1.4em;
}
.applicore-selfie-wrapper .applicore-camera-placeholder-text legend.gfield_label{
	font-size: var(--gf-ctrl-label-font-size-primary);
	color: var(--gf-ctrl-label-color-primary);
	text-align: center;
	padding-left: 6px;
	padding-right: 6px;
}
.applicore-selfie-wrapper .applicore-camera-placeholder-text .applicore-selfie-description.gfield_description{
	font-size: var(--gf-ctrl-desc-font-size);
	color: var(--gf-ctrl-desc-color);
	display: block !important;
	padding-left: 10px;
	padding-right: 10px;
}

/* hide placeholder when camera is active */
.applicore-selfie-wrapper.camera-active .applicore-camera-placeholder,
.applicore-selfie-wrapper.preview-active .applicore-camera-placeholder {
	display: none;
}

/* only show placeholder in idle */
.applicore-selfie-wrapper.camera-active .applicore-camera-stage::before,
.applicore-selfie-wrapper.preview-active .applicore-camera-stage::before {
	display: none;
}

/* -----------------------------
   PLACEMENT GUIDE — oval
------------------------------ */
.applicore-selfie-wrapper.camera-active .applicore-camera-stage .applicore-oval-guide {
	position: absolute;
	top: 8%;
	left: 20%;
	width: 60%;
	height: 84%;
	z-index: 3;

	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.9);

	/* huge spread = darkens everything outside the oval, clipped by
	   .applicore-camera-stage's overflow:hidden into a vignette */
	box-shadow:
		0 0 0 999px rgba(0, 0, 0, 0.45),
		0 0 14px rgba(255, 255, 255, 0.5);
}

/* -----------------------------
   OVAL GUIDE — per aspect ratio
   (only top/height change; left/width stay constant since
   stage width is fixed and only height varies per ratio)
------------------------------ */

/* 3:4 — Europe/Australia/India default */
.applicore-selfie-wrapper[data-aspect-ratio="3:4"].camera-active .applicore-camera-stage .applicore-oval-guide {
	top: 15%;
	height: 63%;
}

/* 5:7 — Canada */
.applicore-selfie-wrapper[data-aspect-ratio="5:7"].camera-active .applicore-camera-stage .applicore-oval-guide {
	top: 17%;
	height: 60%;
}

/* 7:9 — rare */
.applicore-selfie-wrapper[data-aspect-ratio="7:9"].camera-active .applicore-camera-stage .applicore-oval-guide {
	top: 14%;
	height: 66%;
}

/* 1:1 — US: no override needed, base rule (top:8%, height:84%) is
   already dead-center, which is correct since there's no crop to plan for */

/* -----------------------------
	Description text
------------------------------ */
.applicore-selfie-wrapper .applicore-selfie-description {
	margin-top: 10px;
	font-size: var(--gf-ctrl-desc-font-size);
	color: var(--gf-ctrl-desc-color);
	text-align: center;
}

/* -----------------------------
   BUTTON LAYOUT
------------------------------ */
.applicore-selfie-buttons-wrapper {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	justify-content: flex-start;
}

/* optional nicer camera mode alignment
.applicore-selfie-wrapper.camera-active .applicore-selfie-buttons-wrapper {
	justify-content: flex-start;
} */

/* -----------------------------
   BUTTONS
------------------------------ */
.applicore-selfie-wrapper .button {
	display: inline-flex;
	align-items: center;
	gap: 0px;
	padding: 8px 15px;
	background: var(--gf-color-primary);
	color: var(--gf-color-text-secondary);
	border: none;
	border-radius: var(--gf-radius);
	cursor: pointer;
}

.applicore-btn-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: currentColor;
}

.applicore-selfie-wrapper .button:hover {
	background: var(--gf-color-primary-hover);
}