/* TrueLayer (Intersection) components — every colour, space and radius comes from tokens.css */
body { margin: 0; font-family: var(--font-sans); background: var(--background-page-default); color: var(--text-neutral-highContrast); -webkit-font-smoothing: antialiased; }

.tl-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Circular loader ---------- */
.tl-loader { display: inline-block; flex: none; box-sizing: border-box; border-radius: 50%; border-style: solid;
  border-color: var(--border-loader-default-track); border-top-color: var(--border-loader-default-spinner);
  animation: tl-spin .8s linear infinite; }
.tl-loader--xs { width: 16px; height: 16px; border-width: 2px; }
.tl-loader--sm { width: 24px; height: 24px; border-width: 2px; }
.tl-loader--md { width: 80px; height: 80px; border-width: 5px; }
.tl-loader--lg { width: 128px; height: 128px; border-width: 10px; }
.tl-loader--button { border-color: var(--border-progress-button-track); border-top-color: var(--border-progress-button-fill); }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-loader { animation-duration: 2.4s; } }

/* ---------- Button ---------- */
.tl-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  padding: 0 var(--spacing-md); border: var(--border-sm) solid transparent; border-radius: var(--borderRadius-sm);
  font-family: var(--font-sans); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: transparent; transition: background-color .15s ease-in, color .15s ease-in, border-color .15s ease-in; }
.tl-btn--lg { height: 56px; font-size: 20px; line-height: 28px; }
.tl-btn--md { height: 48px; font-size: 18px; line-height: 26px; }
.tl-btn--sm { height: 40px; font-size: 16px; line-height: 24px; padding: var(--spacing-xs) var(--spacing-md); }
.tl-btn--full { width: 100%; }
.tl-btn:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tl-btn.is-loading { cursor: progress; }

.tl-btn--filled { background: var(--background-button-filled-enabled); color: var(--text-button-filled-enabled); }
.tl-btn--filled:not(:disabled):hover { background: var(--background-button-filled-hover); color: var(--text-button-filled-hover); }
.tl-btn--filled:not(:disabled):active { background: var(--background-button-filled-pressed); color: var(--text-button-filled-pressed); }

.tl-btn--outlined { border-color: var(--border-button-outlined-enabled); color: var(--text-button-outlined-enabled); }
.tl-btn--outlined:not(:disabled):hover { background: var(--background-button-outlined-hover); color: var(--text-button-outlined-hover); }
.tl-btn--outlined:not(:disabled):active { background: var(--background-button-outlined-pressed); color: var(--text-button-outlined-pressed); }

.tl-btn--ghost { color: var(--text-button-ghost-enabled); }
.tl-btn--ghost:not(:disabled):hover { color: var(--text-button-ghost-hover); }
.tl-btn--ghost:not(:disabled):active { color: var(--text-button-ghost-pressed); }

.tl-btn--danger { background: var(--background-button-danger-enabled); color: var(--text-neutral-white); }
.tl-btn--danger:not(:disabled):hover { background: var(--background-button-danger-hover); }
.tl-btn--danger:not(:disabled):active { background: var(--background-button-danger-pressed); }

.tl-btn--text { height: auto; padding: var(--spacing-xxs) 0; gap: var(--spacing-xxs); color: var(--text-button-Text-enabled); }
.tl-btn--text.tl-btn--lg { font-size: 18px; line-height: 26px; }
.tl-btn--text.tl-btn--md { font-size: 16px; line-height: 24px; }
.tl-btn--text.tl-btn--sm { font-size: 14px; line-height: 20px; }
.tl-btn--text:not(:disabled):hover { color: var(--text-button-Text-hover); }
.tl-btn--text:not(:disabled):active { color: var(--text-button-Text-pressed); }

/* ---------- Icon button ---------- */
.tl-iconbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: var(--borderRadius-sm); background: transparent; color: var(--icon-neutral-highContrast); cursor: pointer; }
.tl-iconbtn--xl { width: 40px; height: 40px; }
.tl-iconbtn--lg { width: 32px; height: 32px; }
.tl-iconbtn--md { width: 24px; height: 24px; }
.tl-iconbtn--sm { width: 20px; height: 20px; }
.tl-iconbtn:not(:disabled):hover { background: var(--background-neutral-hover); }
.tl-iconbtn:not(:disabled):active { background: var(--background-neutral-pressed); }
.tl-iconbtn:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-iconbtn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ---------- Link ---------- */
.tl-link { display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 600; color: var(--text-accent-highContrast);
  text-decoration: underline; text-underline-offset: 2px; border-radius: var(--borderRadius-sm); cursor: pointer; }
.tl-link--lg { gap: var(--spacing-xxs); padding: var(--spacing-xs); font-size: 18px; line-height: 26px; }
.tl-link--md { gap: var(--spacing-xxs); padding: var(--spacing-xxs); font-size: 16px; line-height: 24px; }
.tl-link--sm { gap: var(--spacing-xxxs); padding: var(--spacing-xxxs); font-size: 14px; line-height: 20px; }
.tl-link--xs { gap: var(--spacing-xxxs); padding: var(--spacing-xxxs); font-size: 12px; line-height: 18px; }
.tl-link:visited { color: var(--text-accent-extraHighContrast); }
.tl-link:hover { color: var(--text-accent-hover); }
.tl-link:active { color: var(--text-accent-pressed); }
.tl-link:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-link.is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }

/* ---------- Input ---------- */
.tl-field { display: flex; flex-direction: column; gap: var(--spacing-xs); font-family: var(--font-sans); min-width: 0; }
.tl-field__label { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-field__box { box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-xs); height: 48px; padding: 0 var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-input-enable); border-radius: var(--borderRadius-sm); }
.tl-field__box:hover { border-color: var(--border-accent-hover); }
.tl-field__box:focus-within { border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.tl-field__input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; font-size: 16px; line-height: 24px;
  color: var(--text-neutral-highContrast); }
.tl-field__input::placeholder { color: var(--text-neutral-lowContrast); opacity: 1; }
.tl-field__msg { margin: 0; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-neutral-lowContrast); }
.tl-field.is-error .tl-field__box { border-color: var(--border-danger); box-shadow: inset 0 0 0 1px var(--border-danger); }
.tl-field.is-error .tl-field__msg { color: var(--text-danger); }
.tl-field.is-readonly .tl-field__box { background: var(--background-neutral-lowContrast); }
.tl-field.is-disabled { opacity: var(--opacity-disabled); }

/* ---------- Checkbox & radio ---------- */
.tl-choice { display: inline-flex; align-items: flex-start; font-family: var(--font-sans); color: var(--text-neutral-highContrast); border-radius: var(--borderRadius-sm); cursor: pointer; }
.tl-choice--md { gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); font-size: 16px; line-height: 24px; }
.tl-choice--lg { gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); font-size: 18px; line-height: 26px; }
.tl-choice--lg .tl-choice__control { margin-top: 1px; }
.tl-choice--right { flex-direction: row-reverse; justify-content: space-between; }
.tl-choice__label { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.tl-choice__control { position: relative; flex: none; width: 24px; height: 24px; }
.tl-choice__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.tl-choice__box { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; pointer-events: none;
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-accent-highContrast); border-radius: var(--borderRadius-xs); color: var(--icon-neutral-default); }
.tl-choice--radio .tl-choice__box { border-radius: 50%; }
.tl-choice__box .tl-icon { visibility: hidden; }
.tl-choice:hover .tl-choice__box { border-color: var(--border-accent-hover); }
.tl-choice__input:checked + .tl-choice__box { background: var(--background-input-selected); border-color: var(--border-selected); }
.tl-choice__input:checked + .tl-choice__box .tl-icon { visibility: visible; }
.tl-choice:hover .tl-choice__input:checked + .tl-choice__box { background: var(--background-input-hover); border-color: var(--border-accent-hover); color: var(--icon-neutral-inverse); }
.tl-choice__input:focus-visible + .tl-choice__box { outline: var(--border-md) solid var(--border-focus); outline-offset: 0; }
.tl-choice.is-error .tl-choice__box { border-color: var(--border-danger); }
.tl-choice__input:disabled + .tl-choice__box, .tl-choice.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tl-choice.is-disabled .tl-choice__box { opacity: 1; }

/* ---------- Tag ---------- */
.tl-tag { box-sizing: border-box; display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 600; border-radius: var(--borderRadius-sm); white-space: nowrap; }
.tl-tag--md { height: 32px; gap: var(--spacing-xs); padding: var(--spacing-xxs) var(--spacing-sm); font-size: 16px; line-height: 24px; }
.tl-tag--sm { height: 28px; gap: var(--spacing-xs); padding: var(--spacing-xxs) var(--spacing-xs); font-size: 14px; line-height: 20px; }
.tl-tag--xs { height: 24px; gap: var(--spacing-xxs); padding: var(--spacing-xxxs) var(--spacing-xs); font-size: 12px; line-height: 18px; }
.tl-tag--default { color: var(--text-neutral-inverse); }
.tl-tag--default.tl-tag--informative { background: var(--background-informative-highContrast); }
.tl-tag--default.tl-tag--success { background: var(--background-success-highContrast); }
.tl-tag--default.tl-tag--warning { background: var(--background-warning-highContrast); }
.tl-tag--default.tl-tag--danger { background: var(--background-danger-highContrast); }
.tl-tag--light.tl-tag--informative { background: var(--background-informative-lowContrast); color: var(--text-informative-onColouredSurface); }
.tl-tag--light.tl-tag--success { background: var(--background-success-lowContrast); color: var(--text-success-onColouredSurface); }
.tl-tag--light.tl-tag--warning { background: var(--background-warning-lowContrast); color: var(--text-warning-onColouredSurface); }
.tl-tag--light.tl-tag--danger { background: var(--background-danger-lowContrast); color: var(--text-danger-onColouredSurface); }
.tl-tag--light.tl-tag--neutral { background: var(--background-neutral-lowContrast); color: var(--text-neutral-highContrast); }

/* ---------- Banner ---------- */
.tl-banner { box-sizing: border-box; display: flex; align-items: stretch; gap: var(--spacing-xs); font-family: var(--font-sans); border: var(--border-sm) solid; overflow: hidden; }
.tl-banner--md { border-radius: var(--borderRadius-md); padding: 0 var(--spacing-md); }
.tl-banner--sm { border-radius: var(--borderRadius-sm); padding: 0 var(--spacing-md); gap: var(--spacing-xxs); }
.tl-banner__content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-banner--md .tl-banner__content { gap: var(--spacing-xxs); padding: var(--spacing-sm) 0; }
.tl-banner--sm .tl-banner__content { padding: var(--spacing-xs) 0; }
.tl-banner__title, .tl-banner__body { display: flex; align-items: flex-start; gap: var(--spacing-xs); }
.tl-banner--sm .tl-banner__title, .tl-banner--sm .tl-banner__body { gap: var(--spacing-xxs); }
.tl-banner__title .tl-icon, .tl-banner__body .tl-icon { margin-top: 4px; }
.tl-banner--sm .tl-banner__title .tl-icon, .tl-banner--sm .tl-banner__body .tl-icon { margin-top: 3px; }
.tl-banner--md .tl-banner__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.tl-banner--md .tl-banner__body { font-size: 14px; line-height: 20px; }
.tl-banner--sm .tl-banner__title { font-size: 14px; line-height: 20px; font-weight: 600; }
.tl-banner--sm .tl-banner__body { font-size: 12px; line-height: 18px; }
.tl-banner__media { flex: none; display: flex; align-items: center; margin-right: calc(-1 * var(--spacing-md)); }
.tl-banner__close { align-self: center; flex: none; }
.tl-banner--info { background: var(--background-informative-lowContrast); border-color: var(--border-informative); color: var(--text-informative-onColouredSurface); }
.tl-banner--info .tl-icon { color: var(--icon-informative-onColouredSurface); }
.tl-banner--error { background: var(--background-danger-lowContrast); border-color: var(--border-danger); color: var(--text-danger-onColouredSurface); }
.tl-banner--error .tl-icon { color: var(--icon-danger-onColouredSurface); }
.tl-banner--warning { background: var(--background-warning-lowContrast); border-color: var(--border-warning); color: var(--text-warning-onColouredSurface); }
.tl-banner--warning .tl-icon { color: var(--icon-warning-onColouredSurface); }
.tl-banner--success { background: var(--background-success-lowContrast); border-color: var(--border-success); color: var(--text-success-onColouredSurface); }
.tl-banner--success .tl-icon { color: var(--icon-success-onColouredSurface); }
.tl-banner .tl-iconbtn { color: inherit; }

/* ---------- preview helpers ---------- */
.tl-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); }
.tl-demo--col { flex-direction: column; align-items: stretch; max-width: 380px; }
/* ---------- Circular animated loader: content in the ring ---------- */
.tl-loaderwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tl-loaderwrap--sm { width: 24px; height: 24px; } .tl-loaderwrap--md { width: 80px; height: 80px; } .tl-loaderwrap--lg { width: 128px; height: 128px; }
.tl-loaderwrap > .tl-loader { position: absolute; inset: 0; width: auto; height: auto; }
.tl-loaderwrap__content { display: inline-flex; align-items: center; justify-content: center; }

/* ---- parts ---- */

/* ===== Card ===== */
/* ---------- Card (Intersection/Card) ---------- */
.tl-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-enabled); border-radius: var(--borderRadius-md);
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); min-width: 0; transition: border-color .15s ease-in; }
.tl-card--button-text { gap: var(--spacing-lg); }
.tl-card__content { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
.tl-card__head { display: flex; align-items: center; gap: var(--spacing-md); min-height: 24px; }
.tl-card__titlegroup { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-xs); }
.tl-card__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.tl-card__icon { display: inline-flex; align-items: center; height: 24px; color: var(--icon-neutral-highContrast); }
.tl-card__media { flex: none; display: inline-flex; width: 32px; height: 32px; border-radius: var(--borderRadius-sm); overflow: hidden; }
.tl-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.tl-card__body { font-size: 14px; line-height: 20px; }
.tl-card__actions { display: flex; gap: var(--spacing-md); }
.tl-card__actions--stacked { flex-direction: column; }
.tl-card__actions--inline > * { flex: 1 1 0; min-width: 0; }
.tl-card.is-interactive, .tl-card--selection, .tl-card--featured { cursor: pointer; }
.tl-card.is-interactive:hover, .tl-card--selection:hover, .tl-card--button-text:hover { border-color: var(--border-neutral-hover); }
.tl-card.is-interactive:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-card--selection:has(.tl-choice__input:focus-visible), .tl-card--featured:has(.tl-choice__input:focus-visible) { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-card .tl-choice__input:focus-visible + .tl-choice__box { outline: none; }
.tl-card--featured { background: var(--background-illustration-neutral); border-color: var(--border-accent-highContrast); color: var(--text-neutral-default); }
.tl-card--featured .tl-card__icon { color: var(--icon-neutral-default); }
.tl-card--featured:hover, .tl-card--featured:has(.tl-choice__input:checked) { border-color: var(--border-accent-hover); }
.tl-card--featured .tl-choice__input:checked + .tl-choice__box { background: var(--background-input-hover); border-color: var(--border-accent-hover); color: var(--icon-neutral-inverse); }
.tl-card.is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }

/* ===== InfoCard ===== */
/* ---------- InfoCard (Intersection/Card/Info) ---------- */
.tl-infocard { box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-extraLowConstrast); border-radius: var(--borderRadius-md);
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); min-width: 0; transition: border-color .15s ease-in; }
.tl-infocard__media { flex: none; display: inline-flex; width: 40px; height: 40px; }
.tl-infocard__media > img { width: 100%; height: 100%; object-fit: contain; }
.tl-infocard__tile { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--borderRadius-sm); background: var(--background-illustration-neutral); border: var(--border-sm) solid var(--border-neutral-extraLowConstrast);
  color: var(--icon-neutral-default); }
.tl-infocard__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-infocard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 24px; }
.tl-infocard--action .tl-infocard__row { min-height: 32px; }
.tl-infocard__label { font-size: 14px; line-height: 20px; color: var(--text-neutral-lowContrast); flex: none; }
.tl-infocard__title { font-size: 16px; line-height: 24px; text-align: right; min-width: 0; }
.tl-infocard__amount { font-size: 16px; line-height: 24px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tl-infocard__line { font-size: 14px; line-height: 20px; text-align: right; }
.tl-infocard__line--title { font-size: 16px; line-height: 24px; }
.tl-infocard__row .tl-btn--text { margin-left: auto; }
.tl-infocard.is-interactive { cursor: pointer; }
.tl-infocard.is-interactive:hover { border-color: var(--border-neutral-hover); }
.tl-infocard.is-interactive:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.tl-infocard.is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }

/* ===== PayFasterCard ===== */
/* ---------- PayFasterCard (Intersection/Card/Pay faster) — styling comes from .tl-card ---------- */
.tl-payfastercard .tl-card__icon { color: var(--icon-neutral-highContrast); }

/* ===== ReviewCard ===== */
/* ---------- ReviewCard (Intersection/Card/Review) ---------- */
.tl-reviewcard { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-extraLowConstrast); border-radius: var(--borderRadius-md);
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); min-width: 0; }
.tl-reviewcard__content { display: flex; align-items: center; gap: var(--spacing-sm); }
.tl-reviewcard__media { flex: none; width: 64px; display: flex; justify-content: center; }
.tl-reviewcard__media > img { max-width: 64px; height: auto; }
.tl-reviewcard__details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.tl-reviewcard__group { display: flex; flex-direction: column; }
.tl-reviewcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-height: 32px; }
.tl-reviewcard__label { flex: none; font-size: 14px; line-height: 20px; color: var(--text-neutral-lowContrast); }
.tl-reviewcard__value { min-width: 0; font-size: 16px; line-height: 24px; text-align: right; overflow-wrap: anywhere; }
.tl-reviewcard__value--bank { line-height: 32px; }
.tl-reviewcard__extra { font-size: 14px; line-height: 20px; text-align: right; }
.tl-reviewcard__sep { margin: 0; border: 0; border-top: var(--border-sm) solid var(--border-neutral-extraLowConstrast); }

/* ===== Accordion ===== */
/* ---------- Accordion (Intersection/Accordion Item/Default) ---------- */
.tl-accordion-wrap { display: flex; flex-direction: column; gap: var(--spacing-xs); font-family: var(--font-sans); min-width: 0; }
.tl-accordion { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-enabled); border-radius: var(--borderRadius-md);
  color: var(--text-neutral-highContrast); transition: border-color .15s ease-in; }
.tl-accordion:hover { border-color: var(--border-neutral-hover); }
.tl-accordion:has(.tl-accordion__head:focus-visible) { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-accordion__head { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; cursor: pointer; }
.tl-accordion__left { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-md); }
.tl-accordion__title { font-size: 16px; line-height: 24px; font-weight: 400; }
.tl-accordion.is-open .tl-accordion__title { font-weight: 600; }
.tl-accordion__icon { color: var(--icon-input); }
.tl-accordion__media { flex: none; display: inline-flex; width: 24px; height: 24px; border-radius: var(--borderRadius-xs); overflow: hidden; }
.tl-accordion__media > img { width: 100%; height: 100%; object-fit: cover; }
.tl-accordion__chevron { color: var(--icon-accent-highContrast); }
.tl-accordion__head:hover .tl-accordion__chevron { color: var(--icon-accent-hover); }
.tl-accordion__panel { font-size: 16px; line-height: 24px; }
.tl-accordion.is-error { border-color: var(--border-danger); }
.tl-accordion__error { margin: 0; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-danger); }
.tl-accordion.is-disabled { opacity: var(--opacity-disabled); }
.tl-accordion.is-disabled .tl-accordion__head { cursor: not-allowed; }

/* ===== Separator ===== */
/* ---------- Separator (Intersection/Separator) ---------- */
.tl-separator { box-sizing: content-box; height: 0; border-top: var(--border-sm) solid var(--border-neutral-extraLowConstrast); }
.tl-separator--low { border-top-color: var(--border-neutral-lowContrast); }
.tl-separator--padded { margin: var(--spacing-xs) 0; }

/* ===== Skeleton ===== */
/* ---------- Skeleton (Intersection/Skeleton) ---------- */
.tl-skeleton { display: block; min-width: 0; }
.tl-skeleton__block { position: relative; display: block; overflow: hidden; background: var(--background-neutral-hover); border-radius: var(--borderRadius-sm); }
.tl-skeleton__block::after { content: ""; position: absolute; top: 0; bottom: 0; left: -100px; width: 100px; opacity: .5;
  background: linear-gradient(90deg, transparent, var(--border-neutral-lowContrast) 55%, transparent); animation: tl-skeleton-lens 1.4s ease-in-out infinite; }
.tl-skeleton.is-static .tl-skeleton__block::after { display: none; }
@keyframes tl-skeleton-lens { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tl-skeleton__block::after { animation: none; display: none; } }
.tl-skeleton__line { height: 12px; width: 100%; }
.tl-skeleton__line--short { width: 240px; max-width: 70%; }
.tl-skeleton__lines { display: flex; flex-direction: column; gap: var(--spacing-md); }
.tl-skeleton--list-item { background: var(--background-neutral-inverse); padding: 0 var(--spacing-md); }
.tl-skeleton__item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; }
.tl-skeleton__square { flex: none; width: 48px; height: 48px; }
.tl-skeleton__line--item { width: 160px; }

/* ===== Placeholder ===== */
/* ---------- Placeholder (Intersection/Placeholder) ---------- */
.tl-placeholder { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border: var(--border-sm) solid var(--border-neutral-extraLowConstrast); vertical-align: middle; }
.tl-placeholder > img { width: 100%; height: 100%; object-fit: cover; }
.tl-placeholder--rect { border-radius: 0; }
.tl-placeholder--square { border-radius: var(--borderRadius-sm); }
.tl-placeholder--square.tl-placeholder--s24 { border-radius: var(--borderRadius-xs); }
.tl-placeholder--square.tl-placeholder--s64 { border-radius: var(--borderRadius-md); }
.tl-placeholder--square.tl-placeholder--s80 { border-radius: var(--borderRadius-icons-xxl); }

/* ===== ListItem ===== */
/* ---------- ListItem (Intersection/List item/Vertical/Interactive) ---------- */
.tl-listitem { box-sizing: border-box; display: flex; align-items: center; width: 100%; margin: 0; border: 0; text-align: left; text-decoration: none;
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); background: var(--background-page-dark); }
.tl-listitem--white { background: var(--background-page-default); }
.tl-listitem--md { gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); min-height: 40px; }
.tl-listitem--lg { gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); min-height: 52px; }
.tl-listitem[data-interactive], label.tl-listitem { cursor: pointer; }
.tl-listitem[data-interactive]:hover, label.tl-listitem:hover { background: var(--background-neutral-hover); }
.tl-listitem[data-interactive]:active, label.tl-listitem:active { background: var(--background-neutral-pressed); }
.tl-listitem:focus-visible, label.tl-listitem:focus-within { outline: var(--border-md) solid var(--border-focus); outline-offset: calc(-1 * var(--border-md)); }
.tl-listitem__left { flex: 1; min-width: 0; display: flex; align-items: center; }
.tl-listitem--md .tl-listitem__left { gap: var(--spacing-xs); }
.tl-listitem--lg .tl-listitem__left { gap: var(--spacing-md); }
.tl-listitem__glyph { display: inline-flex; align-items: center; flex: none; color: var(--icon-neutral-highContrast); }
.tl-listitem__tile, .tl-listitem__media { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--borderRadius-sm); }
.tl-listitem__tile { background: var(--background-illustration-neutral); border: var(--border-sm) solid var(--border-neutral-extraLowConstrast); color: var(--icon-neutral-default); }
.tl-listitem--md .tl-listitem__tile, .tl-listitem--md .tl-listitem__media { width: 40px; height: 40px; }
.tl-listitem--lg .tl-listitem__tile, .tl-listitem--lg .tl-listitem__media { width: 48px; height: 48px; }
.tl-listitem__media > img, .tl-listitem__media > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-listitem__text { min-width: 0; display: flex; flex-direction: column; }
.tl-listitem__title { font-weight: 600; }
.tl-listitem--md .tl-listitem__title, .tl-listitem--md .tl-listitem__label { font-size: 16px; line-height: 24px; }
.tl-listitem--lg .tl-listitem__title, .tl-listitem--lg .tl-listitem__label { font-size: 18px; line-height: 26px; }
.tl-listitem__secondary { font-size: 14px; line-height: 20px; color: var(--text-neutral-lowContrast); }
.tl-listitem__right { flex: none; color: var(--text-neutral-highContrast); }
.tl-listitem--md .tl-listitem__right { font-size: 14px; line-height: 20px; }
.tl-listitem--lg .tl-listitem__right { font-size: 16px; line-height: 24px; }
.tl-listitem__tag { flex: none; display: inline-flex; }
.tl-listitem__check { flex: none; display: inline-flex; color: var(--icon-accent-highContrast); }
.tl-listitem__action { flex: none; display: inline-flex; color: var(--icon-accent-highContrast); }
.tl-listitem.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tl-listitem.is-disabled-readable { cursor: not-allowed; }
.tl-listitem.is-disabled-readable .tl-listitem__glyph, .tl-listitem.is-disabled-readable .tl-listitem__tile, .tl-listitem.is-disabled-readable .tl-listitem__media,
.tl-listitem.is-disabled-readable .tl-listitem__title, .tl-listitem.is-disabled-readable .tl-listitem__label, .tl-listitem.is-disabled-readable .tl-listitem__right,
.tl-listitem.is-disabled-readable .tl-listitem__tag, .tl-listitem.is-disabled-readable .tl-choice { opacity: var(--opacity-disabled); }
.tl-listitem.is-loading .tl-listitem__left { opacity: var(--opacity-disabled); }
.tl-listitem.is-disabled:hover, .tl-listitem.is-disabled-readable:hover { background: var(--background-page-dark); }
.tl-listitem--white.is-disabled:hover, .tl-listitem--white.is-disabled-readable:hover { background: var(--background-page-default); }

/* ===== ListItemHorizontal ===== */
/* ---------- ListItemHorizontal (Intersection/List item/Horizontal) ---------- */
.tl-listitemhorizontal { box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-xxs);
  padding: calc(var(--spacing-xs) - var(--border-sm)); margin: 0; font-family: var(--font-sans); color: var(--text-neutral-highContrast); cursor: pointer;
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-lowContrast); border-radius: var(--borderRadius-sm); }
.tl-listitemhorizontal:not(:disabled):hover { background: var(--background-neutral-hover); }
.tl-listitemhorizontal:not(:disabled):active { background: var(--background-neutral-pressed); }
.tl-listitemhorizontal:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-listitemhorizontal:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tl-listitemhorizontal__label { padding: 0 var(--spacing-xs); }
.tl-listitemhorizontal--sm .tl-listitemhorizontal__label { font-size: 14px; line-height: 20px; }
.tl-listitemhorizontal--md .tl-listitemhorizontal__label { font-size: 16px; line-height: 24px; }
.tl-listitemhorizontal--lg .tl-listitemhorizontal__label { font-size: 18px; line-height: 26px; }
.tl-listitemhorizontal__glyph { display: inline-flex; align-items: center; height: 24px; color: var(--icon-neutral-highContrast); }
.tl-listitemhorizontal__tile, .tl-listitemhorizontal__media { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--borderRadius-sm); }
.tl-listitemhorizontal__tile { background: var(--background-illustration-neutral); border: var(--border-sm) solid var(--border-neutral-extraLowConstrast); color: var(--icon-neutral-default); }
.tl-listitemhorizontal--sm .tl-listitemhorizontal__tile, .tl-listitemhorizontal--sm .tl-listitemhorizontal__media { width: 32px; height: 32px; }
.tl-listitemhorizontal--md .tl-listitemhorizontal__tile, .tl-listitemhorizontal--md .tl-listitemhorizontal__media { width: 40px; height: 40px; }
.tl-listitemhorizontal--lg .tl-listitemhorizontal__tile, .tl-listitemhorizontal--lg .tl-listitemhorizontal__media { width: 48px; height: 48px; }
.tl-listitemhorizontal__media > img, .tl-listitemhorizontal__media > svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== BottomSheet ===== */
/* ---------- BottomSheet (Intersection/Bottom sheet) ---------- */
.tl-bottomsheet { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 390px; padding-bottom: 40px;
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); background: var(--background-page-dark);
  border-radius: var(--borderRadius-md); box-shadow: var(--shadow-sheet); }
.tl-bottomsheet--white { background: var(--background-page-default); }
.tl-bottomsheet--webview { padding-bottom: var(--spacing-md); }
.tl-bottomsheet--full { min-height: 792px; }
.tl-bottomsheet__handle { display: flex; justify-content: center; align-items: center; height: 24px; box-sizing: border-box; padding: var(--spacing-xs) 0 var(--spacing-sm); }
.tl-bottomsheet__handle path { fill: var(--border-neutral-lowContrast); }
.tl-bottomsheet__body { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-xs) var(--spacing-md) 0; }
.tl-bottomsheet--full .tl-bottomsheet__content { flex: 1; }
.tl-bottomsheet__content { display: flex; flex-direction: column; gap: var(--spacing-md); }
.tl-bottomsheet--centre .tl-bottomsheet__content { align-items: center; text-align: center; }
.tl-bottomsheet__media { display: flex; }
.tl-bottomsheet__paragraph { display: flex; flex-direction: column; gap: var(--spacing-xs); align-self: stretch; }
.tl-bottomsheet__titlerow { display: flex; align-items: flex-start; gap: var(--spacing-xs); }
.tl-bottomsheet--centre .tl-bottomsheet__titlerow { justify-content: center; }
.tl-bottomsheet__titlerow--md { min-height: 40px; }
.tl-bottomsheet__titlerow--md .tl-bottomsheet__titleicon { padding: var(--spacing-xxs) 0; }
.tl-bottomsheet__titlerow--sm .tl-bottomsheet__titleicon { padding: var(--spacing-xxxs) 0; }
.tl-bottomsheet__titleicon { display: inline-flex; color: var(--icon-neutral-highContrast); }
.tl-bottomsheet__title { flex: 1; margin: 0; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-bottomsheet__titlerow--md .tl-bottomsheet__title { font-size: 24px; line-height: 32px; padding-top: var(--spacing-xxs); }
.tl-bottomsheet__titlerow--sm .tl-bottomsheet__title { font-size: 20px; line-height: 28px; }
.tl-bottomsheet__text { font-size: 16px; line-height: 24px; color: var(--text-neutral-highContrast); }
.tl-bottomsheet__footer { display: flex; flex-direction: column; }
.tl-bottomsheet__legal { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-md); padding-top: var(--spacing-md);
  border-top: var(--border-sm) solid var(--border-neutral-extraLowConstrast); }
.tl-bottomsheet__legal > img { align-self: center; }
.tl-bottomsheet__buttons { display: flex; flex-direction: column; gap: var(--spacing-md); padding-top: var(--spacing-md); }

/* ===== LearnMoreSheet ===== */
/* ---------- LearnMoreSheet (Intersection/Bottom sheet/Learn more) ---------- */
.tl-learnmoresheet { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.tl-learnmoresheet__titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xs); min-height: 32px; }
.tl-learnmoresheet__logo { display: flex; align-items: center; min-width: 0; }
.tl-learnmoresheet__logo > img { height: 32px; width: auto; display: block; }
.tl-learnmoresheet__heading { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-learnmoresheet__banks { flex: none; display: flex; align-items: center; height: 32px; }
.tl-learnmoresheet__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
.tl-learnmoresheet__step { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.tl-learnmoresheet__num { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--borderRadius-sm);
  background: var(--background-informative-lowContrast); color: var(--text-informative); font-size: 16px; line-height: 24px; font-weight: 600; }
.tl-learnmoresheet__steptext { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tl-learnmoresheet__steptitle { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-learnmoresheet__stepdesc { font-size: 14px; line-height: 20px; color: var(--text-neutral-lowContrast); }
.tl-learnmoresheet__steplink { align-self: flex-start; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; line-height: 20px;
  font-weight: 600; color: var(--text-button-Text-enabled); border-radius: var(--borderRadius-xs); }
.tl-learnmoresheet__steplink:hover { color: var(--text-button-Text-hover); }
.tl-learnmoresheet__steplink:active { color: var(--text-button-Text-pressed); }
.tl-learnmoresheet__steplink:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }

/* ===== ProviderSelectionSheet ===== */
/* ---------- ProviderSelectionSheet (Intersection/Bottom sheet/Provider selection) ---------- */
.tl-providersheet { padding-bottom: 0; overflow: hidden; }
.tl-providersheet__title { padding: var(--spacing-xs) var(--spacing-md); }
.tl-providersheet__title h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-providersheet__body { margin: 0; padding: 0 var(--spacing-md) var(--spacing-xs); font-size: 16px; line-height: 24px; color: var(--text-neutral-highContrast); }
.tl-providersheet__more { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-accent-highContrast);
  border-radius: var(--borderRadius-xs); }
.tl-providersheet__more:hover { color: var(--text-accent-hover); }
.tl-providersheet__more:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-providersheet__inputrow { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); }
.tl-providersheet__inputrow--search { gap: var(--spacing-md); }
.tl-providersheet__search { flex: 1; }
.tl-providersheet__searchicon { display: inline-flex; color: var(--icon-input); }
.tl-providersheet__inputrow .tl-listitemhorizontal { flex: none; width: 48px; height: 48px; }
.tl-providersheet__banner { padding: 0 var(--spacing-md) var(--spacing-xs); }
.tl-providersheet__list { display: flex; flex-direction: column; }

/* ===== Header ===== */
/* ---------- Header (Intersection/Header) ---------- */
.tl-header { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; font-family: var(--font-sans); color: var(--text-neutral-highContrast);
  padding: var(--spacing-md); }
.tl-header--demo.tl-header--in-flow, .tl-header--demo.tl-header--security { padding-top: var(--spacing-xxxl); }
.tl-header--homepage { padding-bottom: 0; }
.tl-header--demo.tl-header--homepage, .tl-header--demo.tl-header--featured { padding-top: var(--spacing-xl); }
.tl-header__row { display: flex; align-items: center; gap: var(--spacing-md); min-height: 56px; }
.tl-header--demo .tl-header__row { min-height: 64px; }
.tl-header--featured .tl-header__row { min-height: 0; gap: 0; flex: 1; }
.tl-header__hometitle { flex: 1; margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.tl-header__avatar { flex: none; display: flex; }
.tl-header--featured { flex-direction: row; align-items: center; gap: var(--spacing-xs); background: var(--background-informative-lowContrast); }
.tl-header--featured .tl-header__hometitle { color: var(--text-neutral-highContrast); }
.tl-header__featured { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.tl-header__featured > img { max-width: 100%; max-height: 100%; }
.tl-header__actions { display: flex; gap: var(--spacing-xs); }
.tl-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: var(--spacing-xs); }
.tl-header__slot { flex: none; display: flex; align-items: center; gap: var(--spacing-xs); min-width: 32px; z-index: 1; }
.tl-header__slot--end { justify-content: flex-end; }
.tl-header__pagetitle { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-size: 20px; line-height: 28px; font-weight: 600; pointer-events: none; }
.tl-header__secure { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); font-size: 14px; line-height: 20px;
  color: var(--text-neutral-lowContrast); }
.tl-header__secure .tl-icon { color: var(--icon-neutral-lowContrast); }

/* ===== Footer ===== */
/* ---------- Footer (Intersection/Footer) ---------- */
.tl-footer { margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; color: var(--text-neutral-lowContrast); }
.tl-footer--left { text-align: left; }
.tl-footer--centre { text-align: center; }
.tl-footer__link, .tl-footer__linktext { font-weight: 600; color: var(--text-accent-highContrast); text-decoration: underline; text-underline-offset: 2px; }
.tl-footer__link { border-radius: var(--borderRadius-xs); }
.tl-footer__link:hover { color: var(--text-accent-hover); }
.tl-footer__link:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }

/* ===== DynamicButton ===== */
/* ---------- Dynamic button (Pay by Bank checkout button) ---------- */
.tl-dynbtn { box-sizing: border-box; display: flex; align-items: stretch; gap: var(--spacing-xxxs); width: 100%; height: 48px; padding: 0; border: 0;
  border-radius: var(--borderRadius-sm); background: transparent; overflow: hidden; cursor: pointer; font-family: var(--font-sans); }
.tl-dynbtn--returning { overflow: visible; }
.tl-dynbtn__brand, .tl-dynbtn__main { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--borderRadius-sm);
  background: var(--background-button-filled-enabled); color: var(--icon-neutral-default); transition: background-color .15s ease-in, color .15s ease-in; }
.tl-dynbtn__main { border: 0; cursor: pointer; height: 48px; }
.tl-dynbtn__main .tl-dynbtn__brand { padding: 0; background: transparent; color: inherit; }
.tl-dynbtn__logo { display: block; flex: none; }
.tl-dynbtn__banks { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  padding: var(--spacing-sm); background: var(--background-neutral-highContrast); color: var(--icon-neutral-inverse); }
.tl-dynbtn--pre-selected .tl-dynbtn__banks { padding: var(--spacing-sm) var(--spacing-md); }
.tl-dynbtn__dropdown { height: 48px; border: 0; border-radius: var(--borderRadius-sm); cursor: pointer; }
.tl-dynbtn__stack { display: flex; }
.tl-dynbtn__stack > * + * { margin-left: -10px; }
.tl-dynbtn__plus { box-sizing: border-box; display: flex; width: 12px; height: 12px; margin-left: -1.8px; padding: var(--spacing-xxxs);
  border-radius: 2px; background: var(--background-button-dynamic-default); color: var(--icon-neutral-highContrast); }
.tl-dynbtn__plus svg { display: block; }
.tl-dynbtn__bank { display: block; flex: none; }
.tl-dynbtn__bankground { fill: var(--background-neutral-white); }
.tl-dynbtn__bankoutline { stroke: var(--border-button-dynamic-banks); }
.tl-dynbtn__banknode { display: inline-flex; width: 24px; height: 24px; overflow: hidden; border-radius: var(--borderRadius-xs); }

/* hover / pressed: the brand section flips like the filled button */
button.tl-dynbtn:not(:disabled):hover .tl-dynbtn__brand, button.tl-dynbtn:not(:disabled):active .tl-dynbtn__brand,
.tl-dynbtn__main:not(:disabled):hover, .tl-dynbtn__main:not(:disabled):active {
  background: var(--background-button-filled-hover); color: var(--icon-neutral-inverse); }
.tl-dynbtn__dropdown:not(:disabled):hover, .tl-dynbtn__dropdown:not(:disabled):active { background: var(--charcoal-80); }
.tl-dynbtn:focus-visible, .tl-dynbtn__main:focus-visible, .tl-dynbtn__dropdown:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-dynbtn:disabled, .tl-dynbtn__main:disabled, .tl-dynbtn__dropdown:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tl-dynbtn.is-loading { cursor: progress; }

/* ===== DynamicButtonCard ===== */
/* ---------- Dynamic button card ---------- */
.tl-dynbtncard { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md);
  background: var(--background-neutral-inverse); border: var(--border-sm) solid var(--border-neutral-enabled); border-radius: var(--borderRadius-md);
  font-family: var(--font-sans); color: var(--text-neutral-highContrast); }
.tl-dynbtncard__copy { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.tl-dynbtncard__title { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.tl-dynbtncard__title h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-dynbtncard__text { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; }
.tl-dynbtncard__more { color: var(--text-accent-highContrast); text-decoration: none; font-weight: 400; }
.tl-dynbtncard__more:hover { color: var(--text-accent-hover); text-decoration: underline; }
.tl-dynbtncard__more:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; border-radius: var(--borderRadius-xs); }
.tl-dynbtncard__banks { display: inline-flex; align-items: center; color: var(--icon-neutral-highContrast); }
.tl-dynbtncard__stack { display: flex; }
.tl-dynbtncard__stack > * + * { margin-left: -10px; }

/* ===== Tabs ===== */
/* ---------- Tabs ---------- */
.tl-tabs { display: flex; gap: 0; font-family: var(--font-sans); }
.tl-tabs--left { justify-content: flex-start; }
.tl-tabs--centre { justify-content: center; }
.tl-tabs--right { justify-content: flex-end; }
.tl-tab { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--spacing-xs); height: 36px; padding: var(--spacing-xs);
  border: var(--border-sm) solid transparent; border-radius: var(--borderRadius-xs); background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-neutral-highContrast); white-space: nowrap; }
.tl-tab .tl-icon { color: var(--icon-neutral-highContrast); }
.tl-tab:not(:disabled):not(.is-active):hover { background: var(--background-neutral-hover); }
.tl-tab:not(:disabled):not(.is-active):active { background: var(--background-neutral-pressed); }
.tl-tab.is-active { background: var(--background-selected); border-color: var(--border-selected); color: var(--text-neutral-onSelectedSurface); font-weight: 600; }
.tl-tab.is-active .tl-icon { color: var(--icon-neutral-onSelectedSurface); }
.tl-tab:focus-visible { outline: var(--border-md) solid var(--border-focus); outline-offset: 1px; }
.tl-tab:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ===== StepperBar ===== */
/* ---------- Stepper bar ---------- */
.tl-stepperbar { display: flex; gap: var(--spacing-xs); width: 100%; }
.tl-stepperbar__seg { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: var(--borderRadius-xxl); background: var(--border-loader-default-track); }
.tl-stepperbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--borderRadius-xxl); background: var(--border-loader-default-spinner); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .tl-stepperbar__fill { transition: none; } }

/* ===== StepperInstructive ===== */
/* ---------- Instructive stepper ---------- */
.tl-stepinstr { display: flex; align-items: flex-start; gap: var(--spacing-md); font-family: var(--font-sans); }
.tl-stepinstr__badge { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--borderRadius-sm); background: var(--background-informative-lowContrast); color: var(--text-informative);
  font-size: 16px; line-height: 24px; font-weight: 600; }
.tl-stepinstr__badge--done { background: var(--background-success-highContrast); color: var(--icon-neutral-inverse); }
.tl-stepinstr__content { display: flex; flex-direction: column; min-width: 0; }
.tl-stepinstr__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-neutral-highContrast); }
.tl-stepinstr__text { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-neutral-lowContrast); }
.tl-stepinstr.is-completed .tl-stepinstr__title { color: var(--text-neutral-lowContrast); }

/* ===== Avatar ===== */
/* ---------- Avatar ---------- */
.tl-avatar { position: relative; display: inline-flex; flex: none; overflow: hidden; border-radius: 50%; background: var(--background-neutral-lowContrast); }
.tl-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 var(--border-sm) var(--border-neutral-extraLowConstrast); pointer-events: none; }
.tl-avatar--xs { width: 24px; height: 24px; }
.tl-avatar--sm { width: 32px; height: 32px; }
.tl-avatar--md { width: 40px; height: 40px; }
.tl-avatar--lg { width: 48px; height: 48px; }
.tl-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-avatar__glyph { display: block; fill: var(--icon-illustration-default); }

/* ===== IconTile ===== */
/* ---------- Icon tile ---------- */
.tl-icontile { position: relative; box-sizing: border-box; display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden;
  background: var(--background-illustration-neutral); color: var(--icon-neutral-default); font-family: var(--font-sans); }
.tl-icontile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--border-sm) var(--border-neutral-extraLowConstrast); pointer-events: none; }
.tl-icontile--sm { width: 32px; height: 32px; border-radius: var(--borderRadius-sm); }
.tl-icontile--md { width: 40px; height: 40px; border-radius: var(--borderRadius-sm); }
.tl-icontile--lg { width: 48px; height: 48px; border-radius: var(--borderRadius-sm); }
.tl-icontile--xl { width: 64px; height: 64px; border-radius: var(--borderRadius-icons-xl); }
.tl-icontile--xxl { width: 80px; height: 80px; border-radius: var(--borderRadius-icons-xxl); }
.tl-icontile--merchant::after { box-shadow: inset 0 0 0 var(--border-sm) var(--charcoal-10); }
.tl-icontile__logo { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-icontile__initials { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-neutral-default); }
.tl-icontile--xl .tl-icontile__initials, .tl-icontile--xxl .tl-icontile__initials { font-size: 20px; line-height: 28px; }

/* ===== LinearLoader ===== */
/* ---------- Linear loader ---------- */
.tl-linloader { position: relative; width: 100%; height: var(--spacing-xxs); overflow: hidden; border-radius: var(--borderRadius-xs); background: var(--border-progress-button-track); }
.tl-linloader__indicator { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--borderRadius-xs); background: var(--background-informative-highContrast); transition: width .2s ease; }
.tl-linloader.is-indeterminate .tl-linloader__indicator { width: 32.35%; animation: tl-linloader 1.2s ease-in-out infinite; }
@keyframes tl-linloader { 0% { left: -33%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tl-linloader.is-indeterminate .tl-linloader__indicator { animation-duration: 3.6s; } }

/* ===== Flag ===== */
/* ---------- Flag ---------- */
.tl-flag { position: relative; display: inline-flex; flex: none; overflow: hidden; background: var(--background-neutral-lowContrast); }
.tl-flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--border-sm) var(--border-neutral-extraLowConstrast); pointer-events: none; }
.tl-flag svg { display: block; }
.tl-flag--lg { width: 48px; height: 48px; border-radius: var(--borderRadius-sm); }
.tl-flag--md { width: 40px; height: 40px; border-radius: var(--borderRadius-sm); }
.tl-flag--sm { width: 32px; height: 32px; border-radius: var(--borderRadius-sm); }
.tl-flag--xs { width: 24px; height: 24px; border-radius: var(--borderRadius-xs); }