/* ============================================================
   PRODUCT SCREENS (flights, hotels, deals, visa), 2026-10-21.
   Layered on travel.css, in the et. tokens: navy ink, sand
   chapters, gold as the one accent. Grids wrap onto two lines,
   never a sideways rail. Phone first (390px). Classes: tp-.
   ============================================================ */

/* Two cards side by side (fare watch, flexible dates). */
.tp-duo { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tp-duo { grid-template-columns: 1.3fr 1fr; } }
.tp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
.tp-card--accent { border-color: var(--c-gold); box-shadow: inset 4px 0 0 var(--c-gold); }
.tp-card__h { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.tp-card p { margin: 0; color: var(--c-muted); max-width: 60ch; }
.tp-card .tp-fine { font-size: var(--t-small); }

/* Trust row: three promises in one band. */
.tp-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-trust .et-feature { margin: 0; padding: 16px; background: var(--c-bg); border-radius: var(--r-md); border: 1px solid var(--c-line); }

/* Route tabs, any number of origins: the checked radio shows its list. */
.tp-routetabs input[type="radio"]:nth-of-type(1):checked ~ .tp-routelist:nth-of-type(1),
.tp-routetabs input[type="radio"]:nth-of-type(2):checked ~ .tp-routelist:nth-of-type(2),
.tp-routetabs input[type="radio"]:nth-of-type(3):checked ~ .tp-routelist:nth-of-type(3),
.tp-routetabs input[type="radio"]:nth-of-type(4):checked ~ .tp-routelist:nth-of-type(4) { display: grid; }
.tp-routetabs input[type="radio"]:nth-of-type(1):checked ~ .tv-tabs .tv-tab:nth-of-type(1),
.tp-routetabs input[type="radio"]:nth-of-type(2):checked ~ .tv-tabs .tv-tab:nth-of-type(2),
.tp-routetabs input[type="radio"]:nth-of-type(3):checked ~ .tv-tabs .tv-tab:nth-of-type(3),
.tp-routetabs input[type="radio"]:nth-of-type(4):checked ~ .tv-tabs .tv-tab:nth-of-type(4) { background: var(--c-ink); color: #fff; }
.tp-routetabs input[type="radio"]:focus-visible ~ .tv-tabs { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: var(--r-pill); }

/* A city without a photograph: a type card, the code set large. */
.tp-city { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 160px; padding: 18px; border-radius: var(--r-md); background: var(--c-ink); color: #fff; text-decoration: none; overflow: hidden; }
.tp-city__code { position: absolute; top: 12px; right: 14px; font: 700 clamp(2.2rem, 5vw, 3rem)/1 var(--f-sans); letter-spacing: 0.02em; color: var(--c-gold); opacity: 0.9; }
.tp-city__name { font-size: var(--t-lead); font-weight: 600; }
.tp-city__country { font-size: var(--t-small); color: rgba(255, 255, 255, 0.72); }
.tp-city__go { margin-top: 6px; font-size: var(--t-small); color: var(--c-gold-light, var(--c-gold)); }
a.tp-city { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
a.tp-city:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
a.tp-city:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.tp-city--card { min-height: 200px; }
.tp-city__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tp-city__actions .et-btn { background: rgba(255, 255, 255, 0.92); color: var(--c-ink); border: 0; box-shadow: none; }

/* Stays by type: five tiles that wrap. */
.tp-types { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tp-types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tp-type { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; color: inherit; min-height: 44px; }
.tp-type strong { font-weight: 600; }
.tp-type small { color: var(--c-muted); font-size: var(--t-small); }

/* Fixed prices from the rate card. */
.tp-prices { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tp-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tp-prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tp-price { display: flex; flex-direction: column; gap: 4px; padding: 18px; text-decoration: none; color: inherit; }
.tp-price__title { font-weight: 600; }
.tp-price__amount { font-size: var(--t-sub); font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); }
.tp-price__unit { color: var(--c-muted); font-size: var(--t-small); margin-bottom: 6px; }

/* The visa checker. */
.tp-check { max-width: 760px; }
.tp-check__form { display: flex; flex-direction: column; gap: 8px; }
.tp-check__label { font-weight: 600; }
.tp-check__row { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-check__row select { flex: 1 1 260px; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-ink); font: inherit; }
.tp-check__result:empty { display: none; }
.tp-check__answer { margin: 16px 0 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--c-bg-alt); border-left: 4px solid var(--c-ink); }
.tp-check__answer--free { border-left-color: var(--c-gold); }
.tp-check__rules { margin: 16px 0 0; }
.tp-check__rules span { color: var(--c-muted); }
.tp-check__list { margin-top: 18px; border-top: 1px solid var(--c-line); padding-top: 12px; }
.tp-check__list summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tp-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tp-table th, .tp-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tp-table thead th { color: var(--c-muted); font-weight: 600; }
.tp-table--fees { max-width: 760px; background: var(--c-bg); border-radius: var(--r-md); }
.tp-table--fees th { font-weight: 600; }
.tp-table--fees td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.tp-table--fees td:nth-child(3) { color: var(--c-muted); }
@media (max-width: 600px) {
    .tp-table--fees tr { display: grid; grid-template-columns: 1fr auto; }
    .tp-table--fees td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
    .tp-table--fees th, .tp-table--fees td { border-bottom: 0; }
    .tp-table--fees tr { border-bottom: 1px solid var(--c-line); }
}

@media (prefers-reduced-motion: reduce) { a.tp-city { transition: none; } }