/**
 * GoSy – Checkout Field Display
 * Cabecera corta + icono (i) con tooltip para columnas de checkout fields.
 */

.gosy-cfd {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.gosy-cfd-txt {
	font-weight: inherit;
}

/* Icono info — mismo diseño que la tarjeta de miembro (gosy-member-card):
   glifo "info" de Material Icons Round en #FF6F00, sin fondo propio. */
.gosy-cfd-i {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border-radius: 50%;
	color: #ff6f00;
	line-height: 0;
	cursor: pointer;
	user-select: none;
	flex: 0 0 auto;
	vertical-align: middle;
	transition: background 0.15s ease;
}

.gosy-cfd-i:hover,
.gosy-cfd-i:focus {
	background: rgba( 255, 111, 0, 0.12 );
	outline: none;
}

.gosy-cfd-i .material-icons-round {
	font-size: 18px;
}

/* Tooltip */
.gosy-cfd-tip {
	/* position:fixed + coordenadas por JS: no desborda el contenedor de la
	   tabla (evita la barra de scroll horizontal) ni se sale del viewport. */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	width: max-content;
	max-width: 260px;
	padding: 8px 10px;
	background: #333;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	text-align: left;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}

/* Flecha del tooltip: apunta al icono (posición horizontal via --gosy-arrow). */
.gosy-cfd-tip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var( --gosy-arrow, 50% );
	transform: translateX( -50% );
	border: 6px solid transparent;
	border-bottom-color: #333;
}

/* Variante cuando el globo se pinta ENCIMA del icono (no cabía debajo). */
.gosy-cfd-tip--above::before {
	bottom: auto;
	top: 100%;
	border-bottom-color: transparent;
	border-top-color: #333;
}

/* Puente invisible sobre el hueco icono↔globo: mantiene el hover al mover
   el ratón hacia el tooltip para poder pulsar los enlaces. */
.gosy-cfd-tip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 8px;
}

.gosy-cfd-tip--above::after {
	bottom: auto;
	top: 100%;
}

/* Contenido HTML del tooltip */
.gosy-cfd-tip a {
	color: #ffb066;
	text-decoration: underline;
}

.gosy-cfd-tip a:hover,
.gosy-cfd-tip a:focus {
	color: #fff;
}

.gosy-cfd-tip strong,
.gosy-cfd-tip b {
	font-weight: 700;
}

.gosy-cfd-tip em,
.gosy-cfd-tip i {
	font-style: italic;
}

.gosy-cfd-i:hover .gosy-cfd-tip,
.gosy-cfd-i:focus .gosy-cfd-tip,
.gosy-cfd-i:focus-within .gosy-cfd-tip {
	display: block;
}