/* Taxi season fares — v8.20
   Mobile first. The table has NO min-width: three short columns fit a 360px
   phone without a horizontal scroller, the same constraint the package price
   grid settled on in v8.16. */

.tf { margin: 0 0 28px; }

.tf-ey { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #DC2626; margin: 0 0 4px; }
.tf-t  { font-size: 1.28rem; font-weight: 900; color: #0F172A; margin: 0 0 8px; }
.tf-rule { width: 46px; height: 3px; background: #DC2626; border-radius: 2px; margin: 0 0 16px; }

/* ── Date + vehicle picker ──────────────────────────────────────────── */
.tf-pick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; background: #F8FAFC; border: 1.5px solid #E2E8F0;
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
.tf-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tf-f label { font-size: .72rem; font-weight: 800; color: #475569; letter-spacing: .02em; }
.tf-f input, .tf-f select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; font-weight: 600;
  color: #0F172A; background: #fff; border: 1.5px solid #CBD5E1;
  border-radius: 10px; padding: 9px 11px; appearance: none; -webkit-appearance: none;
}
.tf-f input:focus, .tf-f select:focus { outline: none; border-color: #DC2626; }
.tf-f select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 11px; padding-right: 30px; }

/* ── Resolved fare ──────────────────────────────────────────────────── */
.tf-res { border: 2px solid #DC2626; border-radius: 14px; padding: 15px; margin-bottom: 16px; background: #fff; }
.tf-res[hidden] { display: none; }
.tf-badge { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; margin-bottom: 7px; }
.tf-badge.is-peak { background: #FEF3C7; color: #B45309; }
.tf-badge.is-off  { background: #DBEAFE; color: #1D4ED8; }
.tf-amt { font-size: 1.85rem; font-weight: 900; color: #0F172A; line-height: 1.1; }
.tf-amt small { font-size: .78rem; font-weight: 700; color: #64748B; margin-left: 5px; }
.tf-sub { font-size: .78rem; color: #475569; margin: 5px 0 0; line-height: 1.45; }
.tf-res .tf-book {
  display: block; width: 100%; margin-top: 12px; font: inherit; font-size: .92rem; font-weight: 800;
  color: #fff; background: #DC2626; border: 0; border-radius: 11px; padding: 12px; cursor: pointer;
}
.tf-res .tf-book:hover { background: #B91C1C; }

/* ── The full table — always rendered, always crawlable ─────────────── */
.tf-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .83rem; }
.tf-tbl th, .tf-tbl td { padding: 10px 7px; text-align: center; border-bottom: 1px solid #E2E8F0; vertical-align: top; }
.tf-tbl thead th { background: #F8FAFC; font-weight: 900; color: #0F172A; font-size: .78rem; border-bottom: 2px solid #CBD5E1; }
.tf-tbl thead th:first-child, .tf-tbl tbody td:first-child { text-align: left; }
.tf-tbl thead th:first-child { border-top-left-radius: 10px; }
.tf-tbl thead th:last-child  { border-top-right-radius: 10px; }
.tf-win { display: block; font-size: .64rem; font-weight: 600; color: #64748B; line-height: 1.35; margin-top: 3px; letter-spacing: 0; }
.tf-veh { font-weight: 800; color: #0F172A; }
.tf-veh small { display: block; font-weight: 600; color: #64748B; font-size: .7rem; margin-top: 2px; }
.tf-cell { font: inherit; font-size: .92rem; font-weight: 900; color: #DC2626; background: none; border: 0; padding: 4px 6px; border-radius: 7px; cursor: pointer; width: 100%; }
.tf-cell:hover { background: #FEF2F2; }
.tf-na { font-size: .78rem; font-weight: 700; color: #94A3B8; }
.tf-disc { font-size: .7rem; color: #64748B; line-height: 1.5; margin: 12px 0 0; }

@media (min-width: 768px) {
  .tf-t { font-size: 1.45rem; }
  .tf-tbl { font-size: .9rem; }
  .tf-tbl th, .tf-tbl td { padding: 13px 12px; }
  .tf-res { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
  .tf-res .tf-book { margin-top: 0; width: auto; padding: 13px 26px; white-space: nowrap; }
}