/* Review Stack
 * Values set in the Elementor panel override these defaults.
 */

.fhr {
	--fhr-card-width: 340px;
	--fhr-card-bg: #ef4836;
	--fhr-card-radius: 0px;
	--fhr-ratio: 108;
	--fhr-x: 18px;
	--fhr-y: 14px;
	--fhr-rot: 4deg;
	--fhr-front-rot: 0deg;
	--fhr-speed: 380ms;
	--fhr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fhr-star: #f5b335;
	--fhr-star-empty: rgba(255, 255, 255, 0.35);
	--fhr-star-size: 20px;
	--fhr-btn-color: #ef4836;
	--fhr-btn-bg: transparent;
	--fhr-btn-border: #ef4836;
	--fhr-btn-pad: 14px 34px;
	--fhr-btn-bw: 2px;
	--fhr-btn-radius: 0px;

	width: 100%;
	/* Keep the card that flies out from widening the page on phones. */
	overflow: hidden;
}

@supports (overflow: clip) {
	.fhr {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* ---------- Stack ---------- */

.fhr-stack {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: start;
	padding: 30px;
}

.fhr--click .fhr-stack {
	cursor: pointer;
}

.fhr-card {
	grid-area: 1 / 1;
	box-sizing: border-box;
	width: var(--fhr-card-width);
	max-width: 100%;
	margin: 0;
	padding: 14px 14px 20px;
	border-radius: var(--fhr-card-radius);
	background: var(--fhr-card-bg);
	box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.3);
	transform-origin: 50% 50%;
	transition: transform var(--fhr-speed) var(--fhr-ease);
}

/* Front card */
.fhr-card[data-depth="0"] {
	z-index: 10;
	transform: rotate(var(--fhr-front-rot));
}

/* Cards behind, each nudged and tilted a different way */
.fhr-card[data-depth="1"] {
	z-index: 9;
	transform: translate(calc(-1 * var(--fhr-x)), calc(-0.25 * var(--fhr-y))) rotate(calc(-1 * var(--fhr-rot)));
}

.fhr-card[data-depth="2"] {
	z-index: 8;
	transform: translate(calc(1.15 * var(--fhr-x)), calc(-0.6 * var(--fhr-y))) rotate(calc(1.35 * var(--fhr-rot)));
}

.fhr-card[data-depth="3"] {
	z-index: 7;
	transform: translate(calc(0.45 * var(--fhr-x)), var(--fhr-y)) rotate(calc(0.55 * var(--fhr-rot)));
}

.fhr-card[data-depth="4"] {
	z-index: 6;
	transform: translate(calc(-0.8 * var(--fhr-x)), calc(1.25 * var(--fhr-y))) rotate(calc(-1.6 * var(--fhr-rot)));
}

/* Waiting their turn: parked in the last visible slot, but invisible, so the
   pile keeps the same silhouette however many reviews there are. */
.fhr-card.is-parked,
.fhr-card[data-depth="5"] {
	opacity: 0;
	pointer-events: none;
}

/* On its way out. It stays where it is and sinks into the pile as the next
   review rises underneath it, so no card is ever seen travelling to the back.
   It keeps the top z-index while it fades, so nothing jumps in front of it. */
.fhr-card.is-sinking {
	z-index: 12;
	opacity: 0;
	transform: rotate(calc(var(--fhr-front-rot) + 1.5deg)) scale(0.97);
	transition:
		transform var(--fhr-speed) var(--fhr-ease),
		opacity calc(var(--fhr-speed) * 0.55) linear calc(var(--fhr-speed) * 0.2);
}

.fhr-card.fhr-instant {
	transition: none !important;
}

/* ---------- Card contents ---------- */

.fhr-media {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / var(--fhr-ratio);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
}

.fhr .fhr-media img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	pointer-events: none;
}

.fhr-body {
	padding-top: 16px;
	text-align: left;
}

.fhr .fhr-quote {
	color: #fff;
	font-style: italic;
	line-height: 1.4;
}

/* inline-flex so the stars follow the text alignment setting */
.fhr-stars {
	display: inline-flex;
	gap: 2px;
	margin-top: 12px;
	vertical-align: middle;
}

.fhr-star {
	display: inline-flex;
	width: var(--fhr-star-size);
	height: var(--fhr-star-size);
	color: var(--fhr-star-empty);
}

.fhr-star.is-on {
	color: var(--fhr-star);
}

.fhr-star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.fhr .fhr-author {
	margin-top: 8px;
	color: #fff;
}

/* ---------- Button ---------- */

.fhr-foot {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

/* Themes and Elementor's global button styles repaint buttons on click and
   while they keep focus afterwards, which dropped this button's border. These
   resets are limited to this button, so they are forced; the colors, border and
   padding still come from the widget's own settings. */
.fhr .fhr-button,
.fhr .fhr-button:hover,
.fhr .fhr-button:focus,
.fhr .fhr-button:focus-visible,
.fhr .fhr-button:active {
	display: inline-block;
	margin: 0;
	padding: var(--fhr-btn-pad) !important;
	border: var(--fhr-btn-bw) solid var(--fhr-btn-border) !important;
	border-radius: var(--fhr-btn-radius) !important;
	background: var(--fhr-btn-bg) !important;
	color: var(--fhr-btn-color) !important;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.fhr .fhr-button:hover,
.fhr .fhr-button:focus-visible {
	border-color: var(--fhr-btn-border-hover, var(--fhr-btn-border)) !important;
	background: var(--fhr-btn-bg-hover, #ef4836) !important;
	color: var(--fhr-btn-color-hover, #fff) !important;
}

/* Keyboard users still get a focus ring; mouse clicks don't leave one behind. */
.fhr .fhr-button:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
}

.fhr .fhr-button:focus:not(:focus-visible) {
	outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.fhr .fhr-card {
		transition-duration: 1ms !important;
	}
}