/**
 * The fare specification on an airline ticket card.
 *
 * A spec table, not a row of chips: suite product, bags, and refund status in the
 * same order on every card, so two fares can be compared by reading straight down.
 * Rows are separated by hairlines and carry no fill — colour is spent only where
 * it means something, on an allowance the airline excluded or a fare it will not
 * refund.
 *
 * The icons exist for scanning, not for decoration, which is why each one still has
 * its label written beside it.
 */

/* Icons inherit the row's colour and its font size, so a warning row is warm all
   the way through. */
.tbo-icon {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    color: inherit;
}

.tbo-ticket__fare {
    grid-area: fare;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-left: 22px;
    border-left: 1px solid var(--tt-hairline);
    box-sizing: border-box;
}

.tbo-fare {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.tbo-fare__row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--tt-hairline);
}

.tbo-fare__row:last-child {
    border-bottom: none;
}

.tbo-fare__label {
    display: flex;
    flex: 0 1 auto;
    gap: 7px;
    align-items: center;
    min-width: 0;
    font-size: 12px;
    letter-spacing: -0.005em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tbo-fare__value {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-align: right;
}

/* The cabin is the fare's headline, so it is the one value set in the text size of
   a heading rather than of a row. */
.tbo-fare__row--strong .tbo-fare__value {
    font-size: 14px;
    font-weight: 600;
}

/* Suite name only — the icon stays, the "Cabin class" caption does not. */
.tbo-fare__row--headline {
    align-items: center;
}

.tbo-fare__row--headline .tbo-fare__label {
    flex: 0 0 auto;
}

.tbo-fare__row--headline .tbo-fare__value {
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
}

.tbo-fare__row--good .tbo-fare__value {
    color: var(--tt-good);
}

.tbo-fare__row--warn .tbo-fare__value {
    color: var(--tt-warn);
}

/* "lowest of the legs" — the qualifier belongs with the figure it qualifies. */
.tbo-fare__note {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

/* Facts about the trip rather than the fare: they appear only when true. */

.tbo-fare__trip-notes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tbo-fare__trip-note {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--color-text-secondary);
}

.tbo-fare__trip-note--accent {
    color: var(--tt-accent);
}

.tbo-fare__trip-note--alert {
    font-weight: 600;
    color: var(--tt-alert);
}