/* Price grid guidance: animated arrow, target-cell ring, instruction highlighter */

.grid.pg-guidance {
	position: relative;
}

/* Animated arrow marker */
.price-grid-mockup-arrow {
	position: absolute;
	width: 130px;
	height: 130px;
	pointer-events: none;
	z-index: 50;
	transform: translate(-50%, -50%);
	animation: pg-guidance-bounce 1.4s ease-in-out infinite;
}

.price-grid-mockup-arrow svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: none;
}

.price-grid-mockup-arrow .shaft,
.price-grid-mockup-arrow .head {
	fill: #57c7c6;
	stroke: none;
	stroke-width: 0;
}

.price-grid-mockup-arrow .pulse {
	fill: rgba(87, 199, 198, 0.14);
	stroke: rgba(87, 199, 198, 0.82);
	stroke-width: 2;
	transform-origin: center;
	animation: pg-guidance-pulse 1.7s ease-out infinite;
}

/* Target cell ring */
.price-grid-target-cell {
	position: relative;
	overflow: visible;
}

.price-grid-target-cell::after {
	content: '';
	position: absolute;
	inset: -6px;
	border: 2px solid #57c7c6;
	border-radius: 0;
	box-shadow: 0 0 0 2px rgba(87, 199, 198, 0.08);
	background: transparent;
	pointer-events: none;
	animation: pg-guidance-glow 1.7s ease-in-out infinite;
}

/* Instruction line highlighter */
.grid.pg-guidance > p {
	display: inline-block;
	background-image: linear-gradient(90deg, #f6f284 100%, transparent 0%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	color: #777;
	transition: color 0.4s ease-in-out, background-size 0.4s ease-in-out;
}

.grid.pg-guidance.grid-hovered:not(.has-expanded) > p {
	background-size: 100% 100%;
	color: #333;
}

/* Per-link tooltip (before first expand) */
.grid.pg-guidance.tooltip-enabled a.grid_link {
	position: relative;
}

.grid.pg-guidance.tooltip-enabled a.grid_link:hover::after {
	content: 'Click to expand';
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: #1f4f4f;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	z-index: 70;
	pointer-events: none;
}

.grid.pg-guidance.tooltip-enabled a.grid_link:hover::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1f4f4f;
	margin-bottom: -4px;
	z-index: 70;
	pointer-events: none;
}

@keyframes pg-guidance-bounce {
	0%, 100% { transform: translate(-50%, -50%) translate(-8px, -8px); }
	50%       { transform: translate(-50%, -50%) translate(10px, 10px); }
}

@keyframes pg-guidance-pulse {
	0%   { transform: scale(0.72); opacity: 0.75; }
	70%  { transform: scale(1.12); opacity: 0; }
	100% { transform: scale(1.12); opacity: 0; }
}

@keyframes pg-guidance-glow {
	0%, 100% { box-shadow: 0 0 0 2px rgba(87, 199, 198, 0.08); }
	50%       { box-shadow: 0 0 0 4px rgba(87, 199, 198, 0.16); }
}