/* ---------- GetTransfer block: read as a booking tool, not a table ----------
 * Added 2026-09-10. The problem was not contrast, it was category. These
 * guides are full of static reference price tables and this block looked
 * exactly like one, so readers read it instead of clicking it. Everything
 * below is about making it a different KIND of thing on the page.
 * ------------------------------------------------------------------------ */

.gt-gtx{
	border-color: rgba(38,129,255,.30);
	box-shadow: 0 3px 16px rgba(14,39,72,.09);
	border-top: 3px solid var(--gt-blue);
	position: relative;
}

.gt-gtx__badge{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background: rgba(38,129,255,.09);
	color: var(--gt-blue);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	line-height: 1.4;
}
.gt-gtx__dot{
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #16a34a;
	flex: none;
}

/* Whole row is the target. The anchor is still the real link, so keyboard
 * and screen reader behaviour is unchanged; this only widens the hit area. */
.gt-gtx__row[data-gt-href]{ cursor: pointer; transition: background-color .12s ease; }
/* Painted on the cells, not the row. Table cells carry their own background
 * from the theme and would cover a tr-level colour. */
.gt-gtx__row[data-gt-href]:hover > th,
.gt-gtx__row[data-gt-href]:hover > td{ background: rgba(38,129,255,.06); }
.gt-gtx__row[data-gt-href]:hover .gt-gtx__btn{ background: var(--gt-navy); }
.gt-gtx__row[data-gt-href]:hover th[scope="row"]{ color: var(--gt-blue); }

/* Prices are the payload, so give them weight. */
.gt-gtx__table tbody td{ font-variant-numeric: tabular-nums; }
.gt-gtx__table tbody td:nth-child(n+4){ font-weight: 600; color: var(--gt-ink); }

.gt-gtx__btn{
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(38,129,255,.35);
	transition: background-color .12s ease, transform .12s ease;
}
.gt-gtx__btn span[aria-hidden]{ margin-left: 3px; display: inline-block; transition: transform .12s ease; }
.gt-gtx__row[data-gt-href]:hover .gt-gtx__btn span[aria-hidden]{ transform: translateX(2px); }
.gt-gtx__btn:focus-visible{ outline: 3px solid var(--gt-blue); outline-offset: 2px; }

/* Keyboard users get the same row highlight when the button inside is
 * focused. :focus-within needs no JS, which matters because focus events do
 * not fire on an unfocused document. */
.gt-gtx__row[data-gt-href]:focus-within > th,
.gt-gtx__row[data-gt-href]:focus-within > td{ background: rgba(38,129,255,.06); }

@media (max-width:767px){
	.gt-gtx__badge{ font-size: 10px; }
	.gt-gtx__btn{ padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce){
	.gt-gtx__row[data-gt-href], .gt-gtx__btn, .gt-gtx__btn span[aria-hidden]{ transition: none; }
}