/*! 
 * Infinite Reviews Marquee — mehrzad.dev (v1.3.2)
 */

.mzd-rm-outer{position:relative;width:100%;--mzd-track-space:26px;}
.mzd-rm-grid{display:flex;align-items:stretch;justify-content:center;width:100%;}

.mzd-rm-track{position:relative;overflow:hidden;min-width:0;--mzd-item-gap:22px;}
.mzd-rm-track.mzd-hidden{display:none !important;}

/* Width modes */
.mzd-track-width-auto .mzd-rm-track{flex:0 0 auto;}
.mzd-track-width-fill .mzd-rm-track{flex:1 1 0;}

/* Alignment modes */
.mzd-grid-align-start .mzd-rm-grid{justify-content:flex-start;}
.mzd-grid-align-center .mzd-rm-grid{justify-content:center;}
.mzd-grid-align-end .mzd-rm-grid{justify-content:flex-end;}
.mzd-grid-align-space .mzd-rm-grid{justify-content:space-between;}

/* Spacing between tracks (supports negative) */
.mzd-rm-grid > .mzd-rm-track + .mzd-rm-track{margin-left:var(--mzd-track-space);}

/* mover: animated by CSS keyframes (no RAF) */
.mzd-rm-track .mzd-mover{will-change:transform;transform:translate3d(0,0,0);display:flex;}
.mzd-rm-track.mzd-axis-y .mzd-mover{flex-direction:column;}
.mzd-rm-track.mzd-axis-x .mzd-mover{flex-direction:row;}

/* Pause on hover (when enabled per-track) */
.mzd-rm-track.mzd-hover-pause:hover .mzd-mover{animation-play-state:paused;}

/* Elementor editor static preview (no animation, no clones visuals moving) */
.mzd-editor-static .mzd-mover{animation:none !important;}
.mzd-editor-static .mzd-group-clone{display:none !important;}

/* Direction is handled by keyframes now; keep classes for compatibility */
.mzd-rm-track.mzd-dir-down{transform:none;}
.mzd-rm-track.mzd-dir-down .mzd-rm-card{transform:none;}
.mzd-rm-track.mzd-dir-right{transform:none;}
.mzd-rm-track.mzd-dir-right .mzd-rm-card{transform:none;}

.mzd-rm-track{display:flex;justify-content:center;}
/*
 * IMPORTANT: spacing must be seamless for infinite loop.
 * We use --mzd-item-gap for BOTH:
 * 1) gap between items
 * 2) end-padding so the boundary between original+clone keeps the same spacing
 */
.mzd-rm-group{display:flex;flex-direction:column;gap:var(--mzd-item-gap);padding:0;margin:0;}
.mzd-rm-track.mzd-axis-y .mzd-rm-group{padding-bottom:var(--mzd-item-gap);} /* keeps spacing at loop seam */
.mzd-rm-track.mzd-axis-x .mzd-rm-group{padding-right:var(--mzd-item-gap);}  /* keeps spacing at loop seam */

/* Card UI */
.mzd-rm-card{
	box-sizing:border-box;
	position:relative;
	width:380px;
	max-width:100%;
	border-radius:24px;
	padding:22px 24px 20px;
	background:rgba(8, 25, 20, 0.55);
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:none; /* handled via ::after so Elementor can control outer shadow without overriding inset */
	backdrop-filter:blur(22px);
	-webkit-backdrop-filter:blur(22px);
}

/* Outer shadow layer (Elementor control targets this) */
.mzd-rm-card::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	pointer-events:none;
	box-shadow:0 30px 60px rgba(0,0,0,0.25);
}

/* Inset shadow layer (optional) */
.mzd-rm-card::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	pointer-events:none;
	box-shadow:none;
}

.mzd-inset-shadow-yes .mzd-rm-card{
	--mzd-inset-h:0px;
	--mzd-inset-v:0px;
	--mzd-inset-blur:24px;
	--mzd-inset-spread:0px;
	--mzd-inset-color:rgba(255,255,255,0.08);
}
.mzd-inset-shadow-yes .mzd-rm-card::before{
	box-shadow:inset var(--mzd-inset-h) var(--mzd-inset-v) var(--mzd-inset-blur) var(--mzd-inset-spread) var(--mzd-inset-color);
}

.mzd-rm-inner{margin-top:14px;}

.mzd-rm-insert{display:flex;align-items:center;justify-content:center;}

.mzd-rm-top{display:flex;align-items:center;gap:12px;}
.mzd-rm-stars{display:flex;align-items:center;gap:4px;}
.mzd-rm-star{color:#eaf8f2;display:inline-flex;}
.mzd-rm-star svg{width:18px;height:18px;fill:currentColor;}
.mzd-rm-rating{color:#dff3ea;font-weight:600;font-size:16px;line-height:1;}

.mzd-rm-body{margin-top:16px;color:rgba(215, 237, 228, 0.70);font-size:16px;line-height:1.45;}

.mzd-rm-footer{margin-top:18px;display:flex;align-items:center;gap:14px;}
.mzd-rm-avatar{width:44px;height:44px;border-radius:999px;overflow:hidden;flex:0 0 auto;}
.mzd-rm-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.mzd-rm-avatar-fallback{display:block;width:100%;height:100%;background:rgba(255,255,255,0.10);}

.mzd-rm-person{min-width:0;}
.mzd-rm-name{color:#fff;font-weight:700;font-size:18px;line-height:1.1;}
.mzd-rm-meta{margin-top:4px;color:rgba(215, 237, 228, 0.55);font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* Horizontal mode (can be mobile OR forced on desktop) */
.mzd-rm-outer.mzd-mode-horizontal .mzd-rm-grid{flex-direction:column;}
.mzd-rm-outer.mzd-mode-horizontal .mzd-rm-grid > .mzd-rm-track + .mzd-rm-track{margin-left:0;margin-top:var(--mzd-track-space);} 
.mzd-rm-outer.mzd-mode-horizontal .mzd-rm-track{height:auto;width:100%;flex:0 0 auto;}
.mzd-rm-outer.mzd-mode-horizontal .mzd-rm-group{flex-direction:row;}

/* When horizontal, the down/up flips are removed by JS; only left/right is used */

/* Improve touch performance */
.mzd-rm-track, .mzd-rm-card{transform:translateZ(0);}

@media (max-width: 767px){
	.mzd-rm-card{width:320px;}
}
