/* GURU Visitor Forms – Front-end submissions carousel */

.vif-carousel{
	position:relative;
	min-width:0;
	max-width:100%;
	margin:16px 0;
	display:flex;
	justify-content:var(--vifc-align, center);
	background:var(--vifc-container-bg, transparent);
	font-family:var(--vifc-font-family, inherit);
}

.vif-carousel__inner{
	width:100%;
	min-width:0;
	max-width:var(--vifc-max-width, 1200px);
	position:relative;
}

.vif-carousel__viewport{
	overflow-x:auto;
	min-width:0;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	outline:none;
}

.vif-carousel__viewport::-webkit-scrollbar{height:10px;}
.vif-carousel__viewport::-webkit-scrollbar-thumb{border-radius:999px;}

.vif-carousel__track{
	display:flex;
	gap:var(--vifc-gap, 16px);
	padding:var(--vifc-track-pad-y, 8px) var(--vifc-track-pad-x, 44px);
	align-items:var(--vifc-track-align, stretch);
}

.vif-carousel__slide{
	/*
		IMPORTANT:
		The track has horizontal padding for arrow breathing-room. Percentages in flex-basis
		are computed against the flex container's *content box* (i.e. excluding padding).
		That causes “4.5 cards” effects where a partial card peeks in.
		We compensate by adding back 2 * track padding into the width calc.
	*/
	flex:0 0 calc(((100% + (2 * var(--vifc-track-pad-x, 0px))) - ((var(--vifc-slides, 1) - 1) * var(--vifc-gap, 16px))) / var(--vifc-slides, 1));
	max-width:calc(((100% + (2 * var(--vifc-track-pad-x, 0px))) - ((var(--vifc-slides, 1) - 1) * var(--vifc-gap, 16px))) / var(--vifc-slides, 1));
	scroll-snap-align:start;
	border:1px solid var(--vifc-card-border, rgba(0,0,0,.12));
	border-radius:var(--vifc-card-radius, 16px);
	padding:var(--vifc-card-padding, 14px);
	background:var(--vifc-card-bg, rgba(255,255,255,.95));
	box-sizing:border-box;
}

/* Field rows allow multiple fields on one line (line grouping) */

.vif-carousel__field-row{
	display:block;
	/* Per-line styling (uses first field's Style settings on that line). */
	padding:var(--vifc-pf-pad-y, var(--vifc-field-pad-y, 0px)) var(--vifc-pf-pad-x, var(--vifc-field-pad-x, 0px));
	margin:0 0 var(--vifc-pf-mb, var(--vifc-field-row-mb, 10px));
	/* Allow per-line alignment via --vifc-pf-align (set on the <p> when grouping fields). */
	text-align:var(--vifc-pf-align, var(--vifc-message-align, left));
}

.vif-carousel__field-inline{
	display:inline;
	padding:0;
}
.vif-carousel__field-label-inline{
	font-weight:var(--vifc-pf-label-weight, var(--vifc-field-label-weight, 600));
	font-size:var(--vifc-pf-label-size, var(--vifc-field-label-size, 12px));
	color:var(--vifc-pf-label-color, var(--vifc-field-label-color, rgba(0,0,0,.7)));
	font-family:var(--vifc-pf-label-font-family, var(--vifc-field-label-font-family, var(--vifc-font-family, inherit)));
}
.vif-carousel__field-value-inline{
	font-weight:var(--vifc-pf-value-weight, var(--vifc-field-value-weight, 400));
	font-size:var(--vifc-pf-value-size, var(--vifc-field-value-size, var(--vifc-message-size, 14px)));
	color:var(--vifc-pf-value-color, var(--vifc-field-value-color, var(--vifc-message-color, inherit)));
	font-family:var(--vifc-pf-value-font-family, var(--vifc-field-value-font-family, var(--vifc-font-family, inherit)));
}

.vif-carousel__field-row .vif-carousel__field{
	flex:1 1 0;
	min-width:0;
}

.vif-carousel__image{margin:0 0 10px;}
.vif-carousel__image img{width:100%;height:auto;display:block;border-radius:var(--vifc-image-radius, 12px);}

.vif-carousel__title{
	margin:0 0 8px;
	font-size:var(--vifc-title-size, 18px);
	line-height:1.25;
	color:var(--vifc-title-color, inherit);
	text-align:var(--vifc-title-align, left);
}

.vif-carousel__msg{
	font-size:var(--vifc-message-size, 14px);
	line-height:var(--vifc-message-line-height, 1.5);
	color:var(--vifc-message-color, inherit);
	opacity:.95;
	text-align:var(--vifc-pf-align, var(--vifc-message-align, left));
	padding:var(--vifc-pf-pad-y, 0px) var(--vifc-pf-pad-x, 0px);
	margin:0 0 var(--vifc-pf-margin-bottom, var(--vifc-msg-gap, 10px));
}

.vif-carousel__field{
	margin:0 0 var(--vifc-pf-margin-bottom, var(--vifc-field-gap, 8px));
	padding:var(--vifc-pf-pad-y, var(--vifc-field-pad-y, 0px)) var(--vifc-pf-pad-x, var(--vifc-field-pad-x, 0px));
}
.vif-carousel__field:last-child{margin-bottom:0;}
.vif-carousel__field-label{
	font-size:var(--vifc-pf-label-size, var(--vifc-field-label-size, 12px));
	line-height:1.25;
	opacity:.9;
	font-weight:var(--vifc-pf-label-weight, var(--vifc-field-label-weight, 600));
	margin:0 0 2px;
	text-align:var(--vifc-pf-align, var(--vifc-message-align, left));
	color:var(--vifc-pf-label-color, var(--vifc-field-label-color, rgba(0,0,0,.7)));
	font-family:var(--vifc-pf-label-font-family, var(--vifc-field-label-font-family, var(--vifc-font-family, inherit)));
}
.vif-carousel__field-value{
	font-size:var(--vifc-pf-value-size, var(--vifc-field-value-size, var(--vifc-message-size, 14px)));
	line-height:var(--vifc-message-line-height, 1.5);
	color:var(--vifc-pf-value-color, var(--vifc-field-value-color, var(--vifc-message-color, inherit)));
	text-align:var(--vifc-pf-align, var(--vifc-message-align, left));
	font-weight:var(--vifc-pf-value-weight, var(--vifc-field-value-weight, 400));
	font-family:var(--vifc-pf-value-font-family, var(--vifc-field-value-font-family, var(--vifc-font-family, inherit)));
}

/* Optional line-clamp truncation (enabled via wrapper class) */
.vif-carousel.vifc-truncate .vif-carousel__msg{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	overflow:hidden;
	-webkit-line-clamp:var(--vifc-message-truncate-lines, 3);
}

.vif-carousel__nav{
	position:absolute;
	z-index:2;
	top:50%;
	transform:translateY(-50%);
	width:var(--vifc-arrow-size, 36px);
	height:var(--vifc-arrow-size, 36px);
	border-radius:999px;
	border:1px solid var(--vifc-arrow-border, rgba(0,0,0,.25));
	background:var(--vifc-arrow-bg, rgba(255,255,255,.95));
	color:var(--vifc-arrow-color, #111);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	line-height:1;
}

.vif-carousel__nav:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:2px;}

.vif-carousel__prev{left:var(--vifc-arrow-offset, 6px);}
.vif-carousel__next{right:var(--vifc-arrow-offset, 6px);}

/* Dots */
.vif-carousel__dots{
	display:flex;
	gap:8px;
	justify-content:center;
	align-items:center;
	padding:var(--vifc-dots-pad-top, 6px) 0 var(--vifc-dots-pad-bottom, 0px);
}

.vif-carousel__dot{
	width:var(--vifc-dot-size, 8px);
	height:var(--vifc-dot-size, 8px);
	border-radius:999px;
	border:0;
	background:var(--vifc-dot-color, rgba(0,0,0,.35));
	cursor:pointer;
	opacity:.9;
}

.vif-carousel__dot.is-active{
	background:var(--vifc-dot-active-color, rgba(0,0,0,.75));
	opacity:1;
}

.vif-carousel-note{
	padding:10px 12px;
	border:1px solid rgba(0,0,0,.18);
	border-radius:12px;
	background:rgba(255,255,255,.9);
	font-size:13px;
}