/*
 * Floating Google review card.
 *
 * Plain CSS for the same reason as the chat widget and the nav drawer: the
 * theme ships without node_modules, so a rule that needs `npm run build:css`
 * before it renders is a rule that renders broken. Everything here is keyed to
 * the tia-review__* hooks and the existing float-* classes in footer.php.
 *
 * Desktop is left alone — the Tailwind utilities on the markup already size it.
 * On a phone the 320px card covered the hero headline and ran into the chat
 * launcher's nudge, so below 640px it shrinks to roughly half the height.
 */

@media (max-width: 639px) {

	#floating-review-left {
		bottom: 12px;
		left: 12px;
		max-width: 200px;
	}

	#floating-review-left .tia-review__card {
		padding: 9px 10px;
		border-radius: 12px;
	}

	#floating-review-left .tia-review__head {
		gap: 7px;
		margin-bottom: 5px;
	}

	#floating-review-left .tia-review__avatar {
		width: 24px;
		height: 24px;
		border-width: 1px;
	}

	#floating-review-left .float-initial {
		font-size: 10px;
	}

	/* Bengali names run long; two lines is the ceiling before the card grows. */
	#floating-review-left .float-name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 10px;
		line-height: 1.35;
	}

	#floating-review-left .tia-review__stars .material-icons {
		font-size: 11px;
	}

	#floating-review-left .float-content {
		-webkit-line-clamp: 2;
		margin-bottom: 5px;
		font-size: 9px;
		line-height: 1.4;
	}

	#floating-review-left .tia-review__foot {
		padding-top: 5px;
	}

	#floating-review-left .tia-review__foot span {
		font-size: 8px;
	}

	#floating-review-left .tia-review__foot svg {
		width: 11px;
		height: 11px;
	}

	#floating-review-left .tia-review__foot .material-icons {
		font-size: 9px;
	}

	#floating-review-left .close-float .material-icons {
		font-size: 14px;
	}

}