/* «معلومات كروت المنتجات» — one-line rotating insight above the card price.
   Loaded only while the feature is on (class-yps-card-insights.php).

   Compact info area: name → 8px → colours → 10px → this line → 8px → price row.
   The line itself never takes margin-top:auto — that is what used to dump a
   row's leftover height *above* it and open big gaps. The price row keeps
   the theme's margin-top:auto, so prices still line up across a grid row. */
.y-card:has(.y-card__insights) .y-card__body { padding: 14px; }
.y-card:has(.y-card__insights) .y-card__title { min-height: 0; }   /* the empty 2nd line was the big gap */
.y-card:has(.y-card__insights) .y-card__colors { margin-top: 8px; }
.y-card:has(.y-card__insights) .y-card__brand + .y-card__colors { margin-top: 6px; }

.y-card__insights {
	position: relative;
	height: 20px;                   /* fixed: switching never moves the price */
	margin: 10px 0 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	color: #1F7F85;                 /* brand turquoise, darkened for >=4.5:1 on #F7F7F7 */
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	direction: rtl; text-align: right; /* same right edge as name and price */
	contain: layout paint;
}
.y-card__title + .y-card__insights { margin-top: 8px; }
.y-card__body > .y-card__insights + .y-card__bottom { margin-top: auto; padding-top: 8px; align-items: center; }

.y-ci__item {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: flex-start; gap: 5px;
	white-space: nowrap; min-width: 0;
	opacity: 0; transform: translateY(100%);
	transition: transform .3s ease, opacity .3s ease;
	pointer-events: none;
}
.y-ci__item.is-active { opacity: 1; transform: translateY(0); }
.y-ci__item.is-leaving { opacity: 0; transform: translateY(-100%); }
.y-ci__icon { flex: 0 0 14px; width: 14px; height: 14px; }
.y-ci__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 400; }
.y-ci__text b { font-weight: 600; }

/* Developer-only demo flag, shown once per page (only when the WP toolbar is hidden). */
.yps-ci-devbar {
	position: fixed; bottom: 76px; inset-inline-start: 12px; z-index: 9999;
	padding: 6px 10px; border-radius: 6px;
	background: #111; color: #fff !important; font-size: 12px; text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

@media (prefers-reduced-motion: reduce) {
	.y-ci__item { transition: none; }
}