/*
 * Points Transfer Partners: front end.
 * Everything is scoped to .ptp. Override the variables below in your theme to restyle, e.g.
 *   .ptp { --ptp-bg: #111; --ptp-line: #333; --ptp-muted: #aaa; --ptp-soft: #222; }
 * Layouts respond to the width of the column they sit in (container queries), not the screen.
 */

.ptp {
	--ptp-tick: #1f9d55;
	--ptp-haircut: #b45309;
	--ptp-bg: #fff;
	--ptp-line: #e3e7ed;
	--ptp-muted: #6b7684;
	--ptp-soft: #f0f2f6;
	container-type: inline-size;
	container-name: ptp;
	width: 100%;
	margin: 1.5em 0;
	font-size: 15px;
	line-height: 1.35;
	box-sizing: border-box;
}
.ptp *, .ptp *::before, .ptp *::after { box-sizing: border-box; }
.ptp ul { list-style: none; margin: 0; padding: 0; }
.ptp li { margin: 0; }
.ptp img { display: block; max-width: none; height: auto; }

.ptp .ptp-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ptp .ptp-ck { width: 20px; height: 20px; display: block; margin: 0 auto; color: var(--ptp-tick); }
.ptp .ptp-bolt { width: 12px; height: 12px; flex: none; color: #b7791f; }
.ptp .ptp-haircut-mark { width: 12px; height: 12px; flex: none; color: var(--ptp-haircut); }

/* ---------- shared marks ---------- */
.ptp .ptp-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; max-width: 100%; height: 24px; padding: 0 5px; border-radius: 6px;
	background: var(--ptp-bc); color: var(--ptp-bf);
	font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptp .ptp-blogo { height: 26px; width: auto; max-width: min(100%, 66px); object-fit: contain; }
.ptp .ptp-plogo { flex: none; height: 30px; width: auto; max-width: 56px; object-fit: contain; }
.ptp .ptp-mono {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--ptp-gt); color: var(--ptp-gc); font-size: 10.5px; font-weight: 800;
}
.ptp .ptp-pc { display: flex; align-items: center; gap: 8px; text-align: left; }
.ptp .ptp-pt { display: flex; flex-direction: column; min-width: 0; }
.ptp .ptp-primary { font-weight: 650; line-height: 1.2; }
.ptp .ptp-secondary { font-size: 12px; color: var(--ptp-muted); line-height: 1.2; }
.ptp .ptp-cnt {
	margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; color: var(--ptp-muted);
	background: var(--ptp-soft); border-radius: 99px; padding: 2px 10px; white-space: nowrap;
}

/* ---------- table ---------- */
/* --ptp-pw = programme column width, --ptp-bw = each bank column. Smaller = less sideways scrolling. */
/* position: relative on the scroll box matters: the table is full of tiny position:absolute screen-reader
   spans (.ptp-sr), and an absolutely-positioned element is only clipped by a scroll box that is its
   containing block. Without this they sit at the table's far-right edge, outside the box, and make the
   whole PAGE scroll sideways on a phone (caught while testing the wrapper added for the edge fade). */
.ptp .ptp-scroll { --ptp-pw: 156px; --ptp-bw: 46px; position: relative; overflow-x: auto; border: 1px solid var(--ptp-line); border-radius: 12px; background: var(--ptp-bg); -webkit-overflow-scrolling: touch; }
/* A soft shadow down the right edge while there are more bank columns to swipe to (frontend.js adds
   .ptp-more to the wrapper, and removes it once you reach the end). Sits on a wrapper because the
   scrolling box itself would carry a pseudo-element along with its content. */
.ptp .ptp-scrollwrap { position: relative; }
.ptp .ptp-scrollwrap::after {
	content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 30px; border-radius: 0 11px 11px 0;
	pointer-events: none; opacity: 0; transition: opacity .2s;
	background: linear-gradient(to left, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0));
}
.ptp .ptp-scrollwrap.ptp-more::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ptp .ptp-scrollwrap::after { transition: none; } }
.ptp table.ptp-table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; border: 0; }
.ptp table.ptp-table th,
.ptp table.ptp-table td {
	/* A row divider drawn as box-shadow, not border-bottom: with the sticky programme column
	   next to it, Safari sometimes fails to repaint a plain border on scroll and it "disappears"
	   on some rows. box-shadow doesn't have that problem. */
	padding: 8px 2px; border: 0; box-shadow: inset 0 -1px 0 0 var(--ptp-line);
	text-align: center; vertical-align: middle; background: var(--ptp-bg); font-weight: inherit;
}
.ptp table.ptp-table tbody tr:last-child > td { box-shadow: none; }
.ptp table.ptp-table tbody tr:last-child > th.ptp-p { box-shadow: 1px 0 0 var(--ptp-line); }

/* Row highlight, to help the eye follow a programme across the columns: a light wash on hover
   (mouse only, so a phone doesn't get a "stuck" hover), and a full group-colour wash on a row you've
   clicked or tapped (frontend.js adds .ptp-row-on; tap it again to clear). The first background line
   is the fallback for browsers without color-mix(). */
@media (hover: hover) {
	.ptp table.ptp-table tbody tr:not(.ptp-grp):hover > td,
	.ptp table.ptp-table tbody tr:not(.ptp-grp):hover > th.ptp-p {
		background: var(--ptp-gt);
		background: color-mix(in srgb, var(--ptp-gt) 50%, var(--ptp-bg));
	}
}
.ptp table.ptp-table tbody tr.ptp-row-on > td,
.ptp table.ptp-table tbody tr.ptp-row-on > th.ptp-p { background: var(--ptp-gt); }
.ptp table.ptp-table thead th { padding-top: 12px; padding-bottom: 10px; vertical-align: bottom; }
.ptp table.ptp-table th.ptp-p { text-align: left; padding-left: 10px; padding-right: 6px; }
.ptp .ptp-bn { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ptp .ptp-bname { font-size: 10px; font-weight: 600; color: var(--ptp-muted); line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.ptp table.ptp-table tr.ptp-grp th {
	text-align: left; padding: 7px 12px; background: var(--ptp-gt); color: var(--ptp-gc);
	font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800;
}
.ptp tr.ptp-grp th span { position: sticky; left: 12px; display: inline-flex; align-items: center; gap: 6px; }
.ptp td.ptp-n::before { content: "\00b7"; color: #cfd5de; }
/* The instant-transfer bolt sits as a small badge on the checkmark's corner, rather than
   stacking below it -- so a row's height never changes depending on which cells are instant. */
.ptp .ptp-y-ico { position: relative; display: inline-block; line-height: 0; }
.ptp .ptp-y-ico .ptp-ck { margin: 0; }
.ptp .ptp-y-ico .ptp-bolt,
.ptp .ptp-y-ico .ptp-haircut-mark {
	position: absolute; width: 12px; height: 12px;
	background: var(--ptp-bg); border-radius: 50%; padding: 1.5px; box-sizing: border-box;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.ptp .ptp-y-ico .ptp-bolt { right: -4px; bottom: -4px; }
/* Haircut sits on the opposite corner, so a cell that's both instant and a haircut partner shows both. */
.ptp .ptp-y-ico .ptp-haircut-mark { right: -4px; top: -4px; }
/* Hiding haircut partners (via the toggle below): the whole ico is swapped for the same "no" dot a
   plain empty cell uses, so a hidden cell doesn't look different from "this bank doesn't transfer here". */
.ptp.ptp-hide-haircut td.ptp-haircut .ptp-y-ico { display: none; }
.ptp.ptp-hide-haircut td.ptp-haircut::before { content: "\00b7"; color: #cfd5de; }
.ptp.ptp-hide-haircut .ptp-pill.ptp-haircut,
.ptp.ptp-hide-haircut .ptp-tag.ptp-haircut { display: none; }

/* matrix layout: scrolls sideways, programme column stays put */
.ptp--matrix table.ptp-table { table-layout: fixed; min-width: calc(var(--ptp-pw) + var(--ptp-cols, 9) * var(--ptp-bw)); }
.ptp--matrix table.ptp-table thead th.ptp-p { width: var(--ptp-pw); }
.ptp--matrix table.ptp-table th.ptp-p {
	position: sticky; left: 0; z-index: 2; min-width: var(--ptp-pw);
	/* Vertical divider (right edge) plus this cell's own row divider (bottom edge) --
	   box-shadow doesn't stack across rules, so both live in this one declaration. */
	box-shadow: 1px 0 0 var(--ptp-line), inset 0 -1px 0 0 var(--ptp-line);
}
.ptp--matrix .ptp-primary { overflow-wrap: anywhere; }
/* The "swipe" hint only shows when the table really does overflow (frontend.js sets .ptp-overflow). */
.ptp .ptp-swipe { display: none; margin: 0 0 8px; font-size: 12px; color: var(--ptp-muted); }
.ptp.ptp-overflow .ptp-swipe { display: block; }
/* Narrow columns (phones): tighten both the programme column and each bank column, so more
   banks fit on screen before the table needs to scroll. */
@container ptp (max-width: 560px) {
	.ptp--matrix .ptp-scroll { --ptp-pw: 118px; --ptp-bw: 46px; }
	.ptp--matrix table.ptp-table th.ptp-p { padding-left: 6px; padding-right: 3px; }
	.ptp--matrix table.ptp-table th.ptp-b,
	.ptp--matrix table.ptp-table td { padding-left: 1px; padding-right: 1px; }
	.ptp--matrix .ptp-pc { gap: 5px; }
	.ptp--matrix .ptp-primary { font-size: 12.5px; }
	.ptp--matrix .ptp-secondary { font-size: 10.5px; }
	.ptp--matrix .ptp-mono { width: 22px; height: 22px; font-size: 8.5px; }
	.ptp--matrix .ptp-plogo { height: 22px; max-width: 28px; }
	.ptp--matrix .ptp-blogo { height: 20px; max-width: 40px; }
	.ptp--matrix .ptp-badge { min-width: 28px; height: 20px; padding: 0 3px; font-size: 9px; }
	.ptp--matrix .ptp-bname { font-size: 9px; }
	.ptp--matrix .ptp-bn { gap: 3px; }
}

/* adaptive layout: fits its column, turns into cards when narrow */
.ptp--adaptive table.ptp-table { table-layout: fixed; }
.ptp--adaptive table.ptp-table thead th.ptp-p { width: 25%; }
.ptp .ptp-only-narrow { display: none; }
@container ptp (max-width: 820px) {
	.ptp--adaptive .ptp-bname {
		position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
}
@container ptp (max-width: 659px) {
	.ptp--adaptive .ptp-only-wide { display: none; }
	.ptp--adaptive .ptp-only-narrow { display: block; }
}
@supports not (container-type: inline-size) {
	.ptp--adaptive table.ptp-table { min-width: 700px; }
}

/* ---------- group bands, cards and tags ---------- */
.ptp .ptp-gband {
	display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--ptp-gc);
	font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800;
}
/* Every group now has an icon (an alliance logo, or a generic plane/bed) from group_mark(),
   so the plain colour dot this used to show is no longer needed. */
.ptp .ptp-gicon { height: 16px; width: auto; max-width: 72px; object-fit: contain; flex: none; border-radius: 3px; }
.ptp .ptp-gband:first-child { margin-top: 0; }
.ptp .ptp-gband small { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ptp-muted); }
.ptp .ptp-card {
	border: 1px solid var(--ptp-line); border-left: 4px solid var(--ptp-gc);
	border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--ptp-bg);
}
.ptp .ptp-card-top { display: flex; align-items: center; gap: 10px; }
.ptp .ptp-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ptp .ptp-pill {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
	border: 1px solid var(--ptp-line); border-radius: 99px; padding: 3px 9px 3px 5px; background: var(--ptp-bg);
}
.ptp .ptp-pill i { width: 14px; height: 14px; border-radius: 50%; background: var(--ptp-bc); display: block; }

/* ---------- by bank ---------- */
.ptp details.ptp-bk { border: 1px solid var(--ptp-line); border-radius: 12px; margin: 0 0 8px; background: var(--ptp-bg); overflow: hidden; }
.ptp details.ptp-bk > summary {
	list-style: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; font-weight: 700;
}
.ptp details.ptp-bk > summary::-webkit-details-marker { display: none; }
.ptp details.ptp-bk > summary::marker { content: ""; }
.ptp details.ptp-bk > summary::after {
	content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 3px 2px;
	border-right: 2px solid var(--ptp-muted); border-bottom: 2px solid var(--ptp-muted);
	transform: rotate(45deg); transition: transform .15s;
}
.ptp details.ptp-bk[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.ptp details.ptp-bk[open] > summary { border-bottom: 1px solid var(--ptp-line); }
.ptp details.ptp-bk > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.ptp .ptp-bkbody { padding: 4px 14px 14px; }
.ptp .ptp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ptp .ptp-tag {
	display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
	border: 1px solid var(--ptp-line); border-radius: 9px; padding: 4px 10px 4px 5px; background: var(--ptp-bg);
}
.ptp .ptp-tag .ptp-mono { width: 22px; height: 22px; border-radius: 6px; font-size: 8.5px; }
.ptp .ptp-tag .ptp-plogo { height: 22px; max-width: 40px; }
.ptp .ptp-empty { font-size: 13px; color: var(--ptp-muted); margin: 12px 0 2px; }
.ptp .ptp-dim > summary { color: var(--ptp-muted); }

/* ---------- footer ---------- */
.ptp .ptp-foot { margin-top: 10px; font-size: 12px; color: var(--ptp-muted); display: flex; flex-direction: column; gap: 3px; }
.ptp .ptp-foot a { color: inherit; }

/* ---------- top bar: badge legend + "Last updated" ---------- */
.ptp .ptp-top {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 4px 16px; margin: 0 0 6px; font-size: 12px; color: var(--ptp-muted);
}
.ptp .ptp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ptp .ptp-legend-item { display: inline-flex; align-items: center; gap: 4px; }
/* With haircut partners removed their badge isn't on screen, so don't explain it either. */
.ptp.ptp-hide-haircut .ptp-legend-haircut { display: none; }

/* ---------- filters bar (the "Haircut partners" toggle) ---------- */
.ptp .ptp-filters { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.ptp .ptp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ptp .ptp-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.ptp .ptp-switch-track {
	position: relative; flex: none; width: 32px; height: 19px; border-radius: 99px;
	background: #c9cdd4; transition: background .15s;
}
.ptp .ptp-switch-track::before {
	content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.ptp .ptp-switch input:checked + .ptp-switch-track { background: var(--ptp-haircut); }
.ptp .ptp-switch input:checked + .ptp-switch-track::before { transform: translateX(13px); }
.ptp .ptp-switch input:focus-visible + .ptp-switch-track { outline: 2px solid var(--ptp-haircut); outline-offset: 2px; }
.ptp .ptp-switch-label { font-size: 13px; font-weight: 650; }
.ptp .ptp-info {
	position: relative; flex: none; display: inline-flex; width: 18px; height: 18px;
	border: 0; background: none; padding: 0; margin: 0; color: var(--ptp-muted); cursor: pointer;
}
.ptp .ptp-info svg { width: 18px; height: 18px; }
.ptp .ptp-tooltip {
	position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
	width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px;
	background: #22262e; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
}
.ptp .ptp-tooltip::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 5px solid transparent; border-top-color: #22262e;
}
/* Plain :focus (not :focus-visible): tapping the icon on a touchscreen must reveal the tooltip too,
   and some browsers' :focus-visible heuristics don't count a tap as "visible" focus. */
.ptp .ptp-info:hover .ptp-tooltip,
.ptp .ptp-info:focus .ptp-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* ---------- floating bank-logo header ---------- */
/* frontend.js appends a copy of the table's header row to <body> (it can't live inside .ptp: that has
   container-type, which would make "fixed" mean "fixed to the widget", not the screen) and positions it
   over the top of the screen while the real header is scrolled out of view. It's a pure look-alike:
   hidden from screen readers, un-clickable, and kept horizontally in step with the real table. Class
   names ("ptp", "ptp--matrix") are copied so every rule above, including the phone-width ones, applies. */
.ptp.ptp-float {
	position: fixed; top: 0; left: 0; margin: 0; z-index: 99; visibility: hidden; pointer-events: none;
	background: var(--ptp-bg); border-radius: 0 0 12px 12px; box-shadow: 0 6px 10px -6px rgba(15, 23, 42, .35);
}
.ptp-float .ptp-scroll { overflow: hidden; border-top: 0; border-radius: 0 0 12px 12px; }
@media print { .ptp.ptp-float { display: none; } }