/**
 * Testimonial Carousel widget.
 *
 * Specificity note: base rules use two class levels (e.g. `.tmt-quotes .x`) so
 * they beat theme/kit rules like `.container button` or `.elementor-kit-N p`,
 * while staying below the three-class selectors Elementor generates from the
 * panel controls - those must keep winning.
 */

.tmt-quotes {
	--tmt-quotes-speed: 500ms;
	/*
	 * The site's own carousel arrow. One asset serves both directions - the
	 * previous button is the same image rotated, exactly as the live site does
	 * it. If the theme path ever changes, this is the only line to edit.
	 */
	--tmt-quotes-arrow-src: url(/themes/custom/tmtfinance_website/dist/assets/images/carousel-arrow-dark.svg);
	/*
	 * One autoplay interval. Declared on the root, not on the controls bar: the
	 * script rewrites it here from the Autoplay Delay, and a declaration closer
	 * to the fill would shadow that value.
	 */
	--tmt-quotes-progress-duration: 5000ms;
}

/*
 * The widget itself is transparent: the background photo belongs on the parent
 * Section/Container so it can run edge to edge.
 */
.tmt-quotes {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-height: 680px;
	background: none;
}

.tmt-quotes .tmt-quotes__stage {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 156px;
	width: 100%;
}

/* Viewport / track ------------------------------------------------------- */

.tmt-quotes .tmt-quotes__viewport {
	flex: 0 1 750px;
	max-width: 750px;
	min-width: 0;
	overflow: hidden;
}

.tmt-quotes .tmt-quotes__track {
	display: flex;
	align-items: flex-start;
	/*
	 * Structural invariant, not cosmetics. The move is `translate3d(-N * 100%)`
	 * of *this* element's width, while each slide is `flex: 0 0 100%` of its
	 * content box. Any horizontal padding, border or gap here makes the step
	 * and the slide pitch disagree, so every slide after the first drifts left
	 * by that amount and the text gets clipped - 15px of padding meant 15px off
	 * slide 2, 45px off slide 3, and so on.
	 *
	 * These two classes outrank a bare `.tmt-quotes__track` from any other
	 * stylesheet, which is how the widget stays correct even when something
	 * outside it tries to pad the track. Side spacing on a phone belongs on the
	 * widget root - see the 767px block at the end of this file.
	 */
	padding: 0;
	border-width: 0;
	gap: 0;
	will-change: transform;
	transition: transform var(--tmt-quotes-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Used for the silent reposition after a wrap-around: the track jumps from the
 * cloned slide to the real one with no animation, so the loop reads as one
 * continuous forward move.
 */
.tmt-quotes .tmt-quotes__track.is-instant {
	transition: none;
}

.tmt-quotes .tmt-quotes__slide {
	flex: 0 0 100%;
	min-width: 0;
	text-align: left;
	/*
	 * Fractional container widths let a sub-pixel sliver of the neighbouring
	 * slide show at the clip edge. Hiding the off-screen slides *after* the move
	 * finishes removes it without interrupting the animation: the transition
	 * comes from the destination state, so an incoming slide appears at once
	 * while an outgoing one stays visible for the whole move.
	 */
	opacity: 1;
	transition: opacity 0s linear var(--tmt-quotes-speed);
}

.tmt-quotes .tmt-quotes__slide:not(.is-current) {
	opacity: 0;
}

.tmt-quotes .tmt-quotes__slide.is-current {
	transition-delay: 0s;
}

/* Fade effect ------------------------------------------------------------ */

/*
 * All slides share one grid cell, so the track needs no transform at all and
 * its height is simply the tallest slide - nothing shifts between slides.
 */
.tmt-quotes--fade .tmt-quotes__track {
	display: grid;
	grid-template-areas: "slide";
	transform: none !important;
	transition: none;
	will-change: auto;
}

.tmt-quotes--fade .tmt-quotes__slide {
	grid-area: slide;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tmt-quotes-speed) ease;
	transition-delay: 0s;
}

.tmt-quotes--fade .tmt-quotes__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.tmt-quotes .tmt-quotes__track {
		transition-duration: 1ms;
	}

	.tmt-quotes--fade .tmt-quotes__slide {
		transition-duration: 1ms;
	}
}

/* Quote ------------------------------------------------------------------ */

.tmt-quotes .tmt-quotes__quote {
	margin: 0 0 40px;
	padding: 0;
	border: 0;
	quotes: none;
	font-family: inherit;
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	color: #fff;
}

/* Brand / attribution ---------------------------------------------------- */

/* Logo wrapper. Its margin/padding come from the panel controls. */
.tmt-quotes .tmt-quotes__brand {
	margin: 0;
	padding: 0;
}

.tmt-quotes .tmt-quotes__logo {
	display: block;
	width: auto;
	max-width: 165px;
	height: auto;
}

.tmt-quotes .tmt-quotes__name {
	display: block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: normal;
	color: #fff;
}

.tmt-quotes .tmt-quotes__role {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	/* Tight enough for a two-line "name / job title" attribution. */
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e8eef2;
}

/* Arrows ----------------------------------------------------------------- */

/* Reset first: themes and kits like to restyle every <button>. */
.tmt-quotes button.tmt-quotes__arrow,
.tmt-quotes button.tmt-quotes__arrow:hover,
.tmt-quotes button.tmt-quotes__arrow:focus,
.tmt-quotes button.tmt-quotes__arrow:active {
	min-width: 0;
	min-height: 0;
	max-width: none;
	padding: 0;
	border: 0;
	box-shadow: none;
	font-family: inherit;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-quotes button.tmt-quotes__arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: transparent;
	color: #12384b;
	font-size: 15px;
	cursor: pointer;
	/* No hover colour change by design - only the disabled state fades. */
	transition: opacity 0.2s ease;
}

/*
 * Default arrows: the site asset as a background, no inline markup. Only added
 * when the panel has no custom Previous/Next icon, so a chosen icon still wins.
 */
.tmt-quotes .tmt-quotes__arrow--asset {
	background: var(--tmt-quotes-arrow-src) no-repeat center;
}

/*
 * The left arrow is the same file mirrored. That now comes from the "Flip
 * Previous Icon" control so it works for a custom icon too, not just the
 * built-in asset - see class-quotes-widget.php.
 */

.tmt-quotes .tmt-quotes__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
}

.tmt-quotes .tmt-quotes__arrow i {
	font-size: inherit;
	line-height: 1;
}

.tmt-quotes .tmt-quotes__arrow:focus {
	outline: none;
}

.tmt-quotes .tmt-quotes__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.tmt-quotes .tmt-quotes__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.tmt-quotes .tmt-quotes__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Play / pause + dots ----------------------------------------------------- */

.tmt-quotes__controls {
	--tmt-quotes-dot: #c5d5e2;
	--tmt-quotes-dot-track: #c5d5e2;
	--tmt-quotes-dot-progress: #5b8cb0;
	--tmt-quotes-dot-size: 7px;
	--tmt-quotes-dot-active-width: 30px;
}

.tmt-quotes .tmt-quotes__controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	/* Matches the viewport width so the bar lines up under the quote. */
	max-width: 750px;
	width: 100%;
	margin: 56px auto 0;
}

/* Same button reset story as the arrows. */
.tmt-quotes button.tmt-quotes__playpause,
.tmt-quotes button.tmt-quotes__playpause:hover,
.tmt-quotes button.tmt-quotes__playpause:focus,
.tmt-quotes button.tmt-quotes__playpause:active,
.tmt-quotes button.tmt-quotes__dot,
.tmt-quotes button.tmt-quotes__dot:hover,
.tmt-quotes button.tmt-quotes__dot:focus,
.tmt-quotes button.tmt-quotes__dot:active {
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	font-family: inherit;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-quotes button.tmt-quotes__playpause {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 14px;
	color: #1b7fc4;
}

.tmt-quotes .tmt-quotes__playpause-icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
}

/*
 * Sizing only. This used to set `display: block` too, and at two classes plus an
 * element it outranked the two-class rule that hides the inactive icon - so both
 * icons showed at once while playing. The toggle rules below now carry three and
 * four classes, which beats it in either state.
 */
.tmt-quotes .tmt-quotes__playpause svg {
	width: 1em;
	height: 1em;
}

/* Playing shows pause, paused shows play - exactly one at a time. */
.tmt-quotes .tmt-quotes__playpause .tmt-quotes__icon-pause {
	display: block;
}

.tmt-quotes .tmt-quotes__playpause .tmt-quotes__icon-play {
	display: none;
}

.tmt-quotes.is-paused .tmt-quotes__playpause .tmt-quotes__icon-play {
	display: block;
}

.tmt-quotes.is-paused .tmt-quotes__playpause .tmt-quotes__icon-pause {
	display: none;
}

.tmt-quotes .tmt-quotes__sr--play {
	display: none;
}

.tmt-quotes.is-paused .tmt-quotes__sr--play {
	display: block;
}

.tmt-quotes.is-paused .tmt-quotes__sr--pause {
	display: none;
}

.tmt-quotes .tmt-quotes__dots {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.tmt-quotes button.tmt-quotes__dot {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--tmt-quotes-dot-size);
	height: var(--tmt-quotes-dot-size);
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--tmt-quotes-dot);
	transition: width 0.25s ease, background-color 0.25s ease;
}

/* The active dot stretches into a track that the progress bar fills. */
.tmt-quotes button.tmt-quotes__dot.is-current {
	width: var(--tmt-quotes-dot-active-width);
	background-color: var(--tmt-quotes-dot-track);
}

.tmt-quotes .tmt-quotes__dot-fill {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 0;
	border-radius: inherit;
	background-color: var(--tmt-quotes-dot-progress);
}

.tmt-quotes .tmt-quotes__dot.is-current .tmt-quotes__dot-fill {
	animation: tmt-quotes-progress var(--tmt-quotes-progress-duration) linear forwards;
}

/*
 * Paused freezes the fill where it is; pressing play restarts it from zero.
 * is-hold covers the times the timer stops without the reader asking - hover,
 * focus, a hidden tab - so the bar never runs ahead of the slide.
 */
.tmt-quotes.is-paused .tmt-quotes__dot.is-current .tmt-quotes__dot-fill,
.tmt-quotes.is-hold .tmt-quotes__dot.is-current .tmt-quotes__dot-fill {
	animation-play-state: paused;
}

@keyframes tmt-quotes-progress {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmt-quotes .tmt-quotes__dot.is-current .tmt-quotes__dot-fill {
		animation: none;
		width: 100%;
	}

	.tmt-quotes button.tmt-quotes__dot {
		transition: none;
	}
}

/* Container helper ------------------------------------------------------- */

/*
 * The background photo lives on the parent Section/Container. Elementor's
 * default Background Size leaves the band taller than the image, and Repeat
 * then tiles it - which is the strip that shows up under the slider. These
 * rules force a single cover-sized image on whichever element directly wraps
 * this widget, in both the container and the legacy section markup.
 *
 * The selectors are deliberately one level deep so an outer section keeps its
 * own background settings. !important is required because Elementor's generated
 * background rules outrank anything a stylesheet selector can reach.
 * background-position is left alone, so the focal point stays adjustable.
 */
.e-con:has(> .elementor-widget-tmt_quotes),
.e-con:has(> .e-con-inner > .elementor-widget-tmt_quotes),
.elementor-widget-wrap:has(> .elementor-widget-tmt_quotes),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-tmt_quotes),
.tmt-bg-cover {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tmt-quotes {
		min-height: 560px;
	}

	.tmt-quotes .tmt-quotes__stage {
		gap: 40px;
	}

	.tmt-quotes .tmt-quotes__quote {
		font-size: 22px;
		margin-bottom: 32px;
	}

	.tmt-quotes .tmt-quotes__name {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	/*
	 * Phone layout, matching the live site: quote, then the play/pause + dots
	 * bar, then the arrows on their own row at the right.
	 *
	 * The arrows live inside the stage, one on each side of the viewport, so
	 * they cannot be reordered against the controls bar - which is the stage's
	 * sibling - by flex order alone. `display: contents` on the stage lifts its
	 * three children into this grid, so all four boxes can be placed freely.
	 * The stage box holds layout only (no background, border or shadow), so
	 * nothing visual is lost; its "Space Around Arrows" value stops applying at
	 * this width and the column gap below spaces the two arrows instead.
	 */
	.tmt-quotes {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-content: start;
		row-gap: 16px;
		column-gap: 10px;
		/*
		 * The parent container drops its side padding at this width, so the
		 * quote would otherwise run into the screen edge. This is the right
		 * element for it: padding on the root shrinks the viewport, and the
		 * track keeps its exact slide pitch.
		 */
		padding-inline: 15px;
		/*
		 * Elementor writes the Minimum Height tablet value inside
		 * `@media (max-width: 1024px)`, which also covers phones whenever the
		 * widget has no mobile value of its own - that is what left half a
		 * screen of empty band under the quote. This keeps the widget at content
		 * height by default; a Minimum Height set for Mobile in the panel is
		 * more specific and still wins.
		 */
		min-height: 0;
	}

	.tmt-quotes .tmt-quotes__stage {
		display: contents;
	}

	.tmt-quotes .tmt-quotes__viewport {
		grid-area: 1 / 1 / 2 / -1;
		max-width: none;
	}

	.tmt-quotes .tmt-quotes__controls {
		grid-area: 2 / 1 / 3 / -1;
		max-width: none;
	}

	.tmt-quotes .tmt-quotes__arrow--prev {
		grid-area: 3 / 2 / 4 / 3;
	}

	.tmt-quotes .tmt-quotes__arrow--next {
		grid-area: 3 / 3 / 4 / 4;
	}

	.tmt-quotes .tmt-quotes__quote {
		font-size: 19px;
		margin-bottom: 26px;
	}

	.tmt-quotes .tmt-quotes__name {
		font-size: 24px;
	}

	.tmt-quotes .tmt-quotes__logo {
		max-width: 130px;
	}
}