/* ═══════════════════════════════════════════════════════════════════════════
   Tour funnel design system — shared by B2C (public) and B2B (portal) pages.
   Self-contained: no CSS custom properties, so it renders identically whether
   loaded under css/style.css (public) or b2b.css (agent portal). Element IDs
   match across both channels' twin pages, which load the same js/tour-*.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.ta-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── Category chips (listing) ── */
.ta-chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 4px 0 22px; }
.ta-chip {
  border: 1px solid #d9e2f2; background: #fff; color: #37445f;
  border-radius: 22px; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .14s;
}
.ta-chip:hover { border-color: #0B3AD6; color: #0B3AD6; }
.ta-chip.active { background: #0B3AD6; border-color: #0B3AD6; color: #fff; }

/* ── Listing grid ── */
.ta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.ta-card {
  background: #fff; border: 1px solid #e8edf6; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  box-shadow: 0 4px 16px rgba(16,40,90,.06); transition: transform .16s, box-shadow .16s;
}
.ta-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(16,40,90,.14); }
.ta-card-media { position: relative; height: 190px; background: #eef2f8 center/cover no-repeat; }
.ta-card-media .ta-cat {
  position: absolute; top: 12px; left: 12px; background: rgba(11,58,214,.94); color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 20px; letter-spacing: .02em;
}
.ta-card-media .ta-feat {
  position: absolute; top: 12px; right: 12px; background: #ffb300; color: #3a2600;
  font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 20px;
}
.ta-card-body { padding: 15px 17px 8px; flex: 1; display: flex; flex-direction: column; }
.ta-card-dest { font-size: 12.5px; color: #6b7896; font-weight: 600; }
.ta-card-title { font-size: 16.5px; font-weight: 800; color: #0f1b33; line-height: 1.32; margin: 4px 0 7px; }
.ta-card-sum { font-size: 13px; color: #64748b; line-height: 1.5; flex: 1; }
.ta-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ta-tag { font-size: 11px; font-weight: 600; color: #4a5878; background: #f0f3fa; padding: 4px 9px; border-radius: 8px; }
.ta-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 12px 17px 16px; border-top: 1px solid #f1f4f9; margin-top: 12px;
}
.ta-card-price b { font-size: 21px; font-weight: 900; color: #0B3AD6; }
.ta-card-price span { font-size: 12px; color: #94a3b8; font-weight: 600; }
.ta-card-cta {
  background: #0B3AD6; color: #fff; font-size: 13px; font-weight: 700;
  padding: 9px 15px; border-radius: 10px;
}
.ta-empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: #64748b;
  background: #fff; border: 1px dashed #cfd9ea; border-radius: 16px;
}
.ta-empty h3 { font-size: 17px; color: #0f1b33; margin: 0 0 8px; }
.ta-skel { height: 340px; border-radius: 18px; background: linear-gradient(100deg,#eef2f8 30%,#f6f9fd 50%,#eef2f8 70%); background-size: 200% 100%; animation: ta-sh 1.2s infinite; }
@keyframes ta-sh { to { background-position: -200% 0; } }

/* ═══════════════ DETAIL ═══════════════ */
.ta-detail { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; }
.ta-gallery { border-radius: 18px; overflow: hidden; }
.ta-gallery-main { width: 100%; height: 380px; background: #eef2f8 center/cover no-repeat; border-radius: 16px; }
.ta-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ta-thumb { width: 84px; height: 60px; border-radius: 9px; background: #eef2f8 center/cover no-repeat; cursor: pointer; border: 2px solid transparent; }
.ta-thumb.active { border-color: #0B3AD6; }

.ta-d-head { margin: 22px 0 6px; }
.ta-d-dest { font-size: 13.5px; color: #6b7896; font-weight: 600; }
.ta-d-title { font-size: 27px; font-weight: 900; color: #0f1b33; line-height: 1.22; margin: 6px 0 12px; }
.ta-d-facts { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0; }
.ta-fact { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #37445f; font-weight: 600; }
.ta-fact svg { width: 18px; height: 18px; stroke: #0B3AD6; fill: none; stroke-width: 2; }

.ta-sec { margin-top: 26px; }
.ta-sec h2 { font-size: 18px; font-weight: 800; color: #0f1b33; margin: 0 0 12px; }
.ta-sec p { font-size: 14.5px; color: #45526f; line-height: 1.7; margin: 0 0 10px; white-space: pre-line; }

.ta-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.ta-list li { position: relative; padding-left: 26px; font-size: 14px; color: #37445f; line-height: 1.5; }
.ta-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 900; }
.ta-list.no li::before { content: "✕"; color: #dc2626; }

.ta-itin { display: flex; flex-direction: column; gap: 0; }
.ta-day { position: relative; padding: 0 0 20px 30px; border-left: 2px solid #e2e8f4; }
.ta-day:last-child { border-left-color: transparent; padding-bottom: 0; }
.ta-day::before {
  content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #0B3AD6; box-shadow: 0 0 0 4px #e7edfc;
}
.ta-day-num { font-size: 12px; font-weight: 800; color: #0B3AD6; text-transform: uppercase; letter-spacing: .04em; }
.ta-day-title { font-size: 15px; font-weight: 700; color: #0f1b33; margin: 2px 0 4px; }
.ta-day-text { font-size: 13.5px; color: #5b6880; line-height: 1.6; }

/* Booking box (sticky) */
.ta-book {
  position: sticky; top: 90px; background: #fff; border: 1px solid #e6ecf5;
  border-radius: 18px; padding: 20px; box-shadow: 0 10px 34px rgba(16,40,90,.1);
}
.ta-book-price { font-size: 15px; color: #64748b; }
.ta-book-price b { font-size: 27px; font-weight: 900; color: #0B3AD6; display: block; }
.ta-book-lbl { font-size: 12.5px; font-weight: 700; color: #45526f; margin: 16px 0 6px; display: block; }
.ta-book select, .ta-book input {
  width: 100%; border: 1px solid #dbe4f4; border-radius: 10px; padding: 11px 12px;
  font-size: 14px; font-family: inherit; outline: none; background: #fff; color: #0f1b33;
}
.ta-book select:focus, .ta-book input:focus { border-color: #0B3AD6; }
.ta-qty { display: flex; gap: 10px; }
.ta-qty > div { flex: 1; }
.ta-book-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 18px 0 4px; padding-top: 14px; border-top: 1px dashed #e2e8f4;
}
.ta-book-total span { font-size: 14px; color: #45526f; font-weight: 600; }
.ta-book-total b { font-size: 23px; font-weight: 900; color: #0f1b33; }
.ta-seats-note { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.ta-btn {
  display: block; width: 100%; text-align: center; background: #0B3AD6; color: #fff;
  border: 0; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 800;
  cursor: pointer; font-family: inherit; margin-top: 14px; transition: background .15s;
  text-decoration: none;
}
.ta-btn:hover { background: #0930ad; }
.ta-btn:disabled, .ta-btn.disabled { opacity: .5; cursor: default; pointer-events: none; }
.ta-btn.ghost { background: #f1f5fb; color: #0B3AD6; }

/* ═══════════════ BOOKING PAGE ═══════════════ */
.ta-steps { display: flex; gap: 8px; margin: 0 0 24px; flex-wrap: wrap; }
.ta-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #94a3b8; }
.ta-step .n { width: 24px; height: 24px; border-radius: 50%; background: #e6ecf5; color: #64748b; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.ta-step.active { color: #0B3AD6; }
.ta-step.active .n { background: #0B3AD6; color: #fff; }
.ta-step.done .n { background: #16a34a; color: #fff; }

.ta-bk-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.ta-panel { background: #fff; border: 1px solid #e8edf6; border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.ta-panel h2 { font-size: 16px; font-weight: 800; color: #0f1b33; margin: 0 0 4px; }
.ta-panel .hint { font-size: 12.5px; color: #94a3b8; margin: 0 0 16px; }
.ta-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.ta-f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.ta-f.wide { grid-column: 1 / -1; }
.ta-f > span { font-weight: 700; color: #45526f; }
.ta-f input, .ta-f textarea {
  border: 1px solid #dbe4f4; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  font-family: inherit; outline: none; background: #fff; color: #0f1b33;
}
.ta-f input:focus, .ta-f textarea:focus { border-color: #0B3AD6; }
.ta-traveler { border: 1px solid #eef1f7; border-radius: 12px; padding: 15px; margin-bottom: 12px; }
.ta-traveler-h { font-size: 13px; font-weight: 800; color: #0B3AD6; margin-bottom: 11px; }

.ta-summary { position: sticky; top: 90px; background: #fff; border: 1px solid #e6ecf5; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(16,40,90,.08); }
.ta-summary-img { width: 100%; height: 130px; border-radius: 12px; background: #eef2f8 center/cover no-repeat; margin-bottom: 14px; }
.ta-summary h3 { font-size: 16px; font-weight: 800; color: #0f1b33; margin: 0 0 4px; }
.ta-summary .dest { font-size: 12.5px; color: #6b7896; }
.ta-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; color: #45526f; padding: 8px 0; border-bottom: 1px solid #f1f4f9; }
.ta-summary-row.total { border-bottom: 0; padding-top: 14px; }
.ta-summary-row.total b { font-size: 20px; color: #0f1b33; }

.ta-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; margin-top: 12px; display: none; }

/* ═══════════════ CONFIRMATION ═══════════════ */
.ta-conf { max-width: 680px; margin: 0 auto; }
.ta-conf-banner { border-radius: 16px; padding: 26px; text-align: center; margin-bottom: 20px; }
.ta-conf-banner.pending   { background: #fff7ed; border: 1px solid #fed7aa; }
.ta-conf-banner.paid      { background: #eff6ff; border: 1px solid #bfdbfe; }
.ta-conf-banner.confirmed { background: #f0fdf4; border: 1px solid #bbf7d0; }
.ta-conf-banner .icon { font-size: 42px; }
.ta-conf-banner h1 { font-size: 22px; font-weight: 900; color: #0f1b33; margin: 8px 0 6px; }
.ta-conf-banner p { font-size: 14px; color: #5b6880; line-height: 1.6; margin: 0; }
.ta-conf-card { background: #fff; border: 1px solid #e8edf6; border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.ta-conf-ref { font-size: 13px; color: #64748b; }
.ta-conf-ref b { font-size: 18px; color: #0f1b33; letter-spacing: .04em; }
.ta-pay-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 1px solid #dbe4f4; background: #fff; border-radius: 12px; padding: 15px 18px;
  font-size: 15px; font-weight: 700; color: #0f1b33; cursor: pointer; font-family: inherit; margin-top: 10px;
}
.ta-pay-btn:hover { border-color: #0B3AD6; background: #f7faff; }
.ta-pay-btn .amt { color: #0B3AD6; font-weight: 900; }

@media (max-width: 900px) {
  .ta-detail, .ta-bk-grid { grid-template-columns: 1fr; }
  .ta-book, .ta-summary { position: static; }
  .ta-gallery-main { height: 260px; }
  .ta-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ta-fields { grid-template-columns: 1fr; }
  .ta-d-title { font-size: 22px; }
}