/*
-------------------------------------------------------------------------------
Ticket Experience infotip css
Copyright © 1999-2026 KB Group (UK) Ltd.  All Rights Reserved.
-------------------------------------------------------------------------------

Revisions
=========
16/09/26	SK	Aligned help presentation with shared notification styling
24/04/26	SK	Updated to modern look
12/10/21	SK	Removed deprecated css
-------------------------------------------------------------------------------
*/

/* --- The Tooltip Box --- */
.infotip {
	background: #ffffff; /* Clean white background for readability */
	color: #405b6e; /* Shared notification text colour */
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;

	padding: 11px 14px;
	border-radius: 9px;
	position: absolute;
	text-align: left;

	/* Shared notification depth and blue help emphasis */
	border: 1px solid #c9dce8;
	box-shadow: 0 4px 12px rgba(36, 61, 79, 0.12);

	max-width: 250px; /* Prevents long help text from stretching across the screen */
	z-index: 1000;
}

/* --- The Pointy Arrow --- */
.infotip-arrow {
	border-color: transparent #c9dce8 transparent transparent; /* Match the box border */
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
	position: absolute;
	left: -12px;
	top: 10px; /* Adjusted to align with the first line of text */
}

/* Internal white triangle to hide the border-edge of the arrow */
.infotip-arrow::after {
	content: "";
	border-color: transparent #ffffff transparent transparent;
	border-style: solid;
	border-width: 6px;
	position: absolute;
	left: -5px;
	top: -6px;
}

/* --- The Help Trigger Icon --- */
.help {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;
	border-radius: 50%; /* Perfect circle */

	background-color: #edf7fc;
	color: #216e9c;
	border: 1px solid #b9d8ec;

	font-size: 12px;
	font-weight: 700;
	font-family: Arial, sans-serif;

	cursor: help;
	vertical-align: middle;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	transform: translateY(1px);
}

.help:hover {
	background-color: #2176a8;
	color: #ffffff;
	border-color: #2176a8;
	box-shadow: 0 2px 5px rgba(33, 118, 168, 0.24);
}

.transparent {
	opacity: 0;
}