/* Structural layout only — a dialogue bubble with the author line below it.
   Colours/typography come from admin settings via custom properties. */

.kv-recommendation {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 10px;
}

/* The bubble itself: everything except the author line lives in here. */
.kv-recommendation__bubble {
	position: relative;
	box-sizing: border-box;
	padding: 12px 14px;
	/* An opaque fill is required so the tail can mask the bubble border
	   where it joins — see the ::after rule below. */
	background: var(--kv-reco-bg, #fff);
	border: 1px solid var(--kv-reco-border, #4a7b85);
	border-radius: var(--kv-reco-radius, 6px);
}

/* Tail: a rotated square whose two visible borders form the point, and
   whose fill hides the bubble's bottom border behind it. */
.kv-recommendation__bubble::after {
	content: '';
	position: absolute;
	left: var(--kv-reco-tail-offset, 22px);
	bottom: -6px;
	width: 11px;
	height: 11px;
	background: var(--kv-reco-bg, #fff);
	border-right: 1px solid var(--kv-reco-border, #4a7b85);
	border-bottom: 1px solid var(--kv-reco-border, #4a7b85);
	transform: rotate(45deg);
	pointer-events: none;
}

.kv-recommendation__label {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}

.kv-recommendation__label-text {
	flex: 1 1 auto;
	min-width: 0;
}

.kv-recommendation__icon {
	flex: 0 0 auto;
	display: block;
	width: var(--kv-reco-icon-w, 32px);
	height: var(--kv-reco-icon-h, 32px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kv-recommendation__quote {
	margin: 0;
	padding: 0;
	font-style: normal;
}

/* Author sits outside the bubble, clearing the tail and aligned to it. */
.kv-recommendation__author {
	display: block;
	margin-top: 12px;
	padding-left: var(--kv-reco-author-indent, 0);
	font-style: normal;
}

.kv-recommendation--product {
	margin-top: 16px;
}

/* Keep the note inside the card link flow without adding interactive nodes. */
.asp-product-card__link .kv-recommendation {
	pointer-events: none;
}