/**
 * 3D Testimonial Cube — frontend styles.
 *
 * A genuine solid cube: six square faces (four carry testimonials, two are
 * lids), tilted in space like a turntable so the viewer sees its depth (a top
 * face + a front face + a receding side face at once) and kept tilted while it
 * spins around a fixed vertical axis. All colors / sizes are CSS custom
 * properties that the Elementor controls override on the .utc-stage wrapper.
 */

/* Widget icon for the Elementor panel / navigator. Uses a CSS mask so it
   inherits the panel's text colour and hover state like the native eicons. */
.utc-cube-icon:before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%2021%207%2021%2017%2012%2022%203%2017%203%207Z%22%2F%3E%3Cpath%20d%3D%22M12%202%2012%2012%22%2F%3E%3Cpath%20d%3D%22M12%2012%2021%207%22%2F%3E%3Cpath%20d%3D%22M12%2012%203%207%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%2021%207%2021%2017%2012%2022%203%2017%203%207Z%22%2F%3E%3Cpath%20d%3D%22M12%202%2012%2012%22%2F%3E%3Cpath%20d%3D%22M12%2012%2021%207%22%2F%3E%3Cpath%20d%3D%22M12%2012%203%207%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.utc-stage {
	--utc-size: 320px;
	--utc-perspective: 1500px;
	--utc-tilt-x: 16deg;   /* look down onto the cube */
	--utc-tilt-y: -24deg;  /* swing so a side face is visible */

	--utc-face-bg: #141517;
	--utc-lid-bg: #1c1e22;
	--utc-face-border: rgba(255, 255, 255, 0.10);
	--utc-face-border-width: 1px;
	--utc-face-radius: 18px;
	--utc-face-padding: 26px;

	--utc-quote-color: #f5f5f7;
	--utc-name-color: #ffffff;
	--utc-role-color: rgba(255, 255, 255, 0.55);
	--utc-star-color: #ffc83d;
	--utc-star-empty-color: rgba(255, 255, 255, 0.18);
	--utc-star-size: 15px;
	--utc-avatar-size: 44px;
	--utc-avatar-border: rgba(255, 255, 255, 0.15);

	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(var(--utc-size) * 1.9);
	padding: 60px 20px;
	box-sizing: border-box;
	perspective: var(--utc-perspective);
	perspective-origin: 50% 42%;
	overflow: hidden;
}

/* Manual drag-to-rotate: grab cursor, allow vertical page scroll on touch. */
.utc-stage.utc-draggable {
	cursor: grab;
	touch-action: pan-y;
}

.utc-stage.utc-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

.utc-stage.utc-dragging * {
	cursor: grabbing;
}

/* Outer box: fixed square footprint. */
.utc-cube {
	position: relative;
	width: var(--utc-size);
	height: var(--utc-size);
	transform-style: preserve-3d;
}

/* Structural wrapper. The resting tilt used to live here, but the JS engine
   now drives the full orientation (tilt + spin + drag) on .utc-cube__inner so
   that vertical dragging works, so this stays untransformed to avoid doubling
   the tilt. The CSS vars remain as a no-JS fallback pose. */
.utc-cube__tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--utc-tilt-x)) rotateY(var(--utc-tilt-y));
}

.utc-cube.utc-js .utc-cube__tilt {
	transform: none;
}

/* The turntable that actually rotates. JS sets its transform + transition. */
.utc-cube__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.utc-face {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	background: var(--utc-face-bg);
	border: var(--utc-face-border-width) solid var(--utc-face-border);
	border-radius: var(--utc-face-radius);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
}

/* Soft top-lit sheen for depth on every face (sits under the content). */
.utc-face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
}

/* Per-face content wrapper, above the sheen. */
.utc-face__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	color: var(--utc-quote-color);
}

/* Testimonial content is a centered, padded column. */
.utc-face__content--testimonial {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: var(--utc-face-padding);
}

/* Elementor-template content fills the face; overflow is clipped to it. */
.utc-face__content--template {
	overflow: hidden;
}

/* Lids default background (used when no per-face background is set). */
.utc-lid {
	background: var(--utc-lid-bg);
}

/* ---- Rating stars ---- */
.utc-stars {
	position: relative;
	display: inline-flex;
	line-height: 1;
	font-size: var(--utc-star-size);
	letter-spacing: 2px;
	z-index: 1;
}

.utc-stars__base,
.utc-stars__fill {
	white-space: nowrap;
}

.utc-stars__base {
	color: var(--utc-star-empty-color);
}

.utc-stars__fill {
	position: absolute;
	inset: 0;
	color: var(--utc-star-color);
	overflow: hidden;
	width: 0; /* set inline by JS */
}

/* ---- Quote ---- */
.utc-quote {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--utc-quote-color);
	font-size: 1rem;
	line-height: 1.5;
}

.utc-quote::before { content: "\201C"; margin-right: 2px; }
.utc-quote::after  { content: "\201D"; margin-left: 2px; }

/* ---- Person row ---- */
.utc-person {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.utc-avatar {
	flex: 0 0 auto;
	width: var(--utc-avatar-size);
	height: var(--utc-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--utc-avatar-border);
	background: rgba(255, 255, 255, 0.06);
}

.utc-meta { display: flex; flex-direction: column; min-width: 0; }

.utc-name {
	color: var(--utc-name-color);
	font-weight: 600;
	line-height: 1.2;
}

.utc-role {
	color: var(--utc-role-color);
	font-size: 0.85em;
	line-height: 1.3;
	margin-top: 2px;
}

/* ---- Accessible / SEO fallback list ---- */
.utc-sr-list {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.utc-cube__inner { transition: none !important; }
}