/* Voyaggora Trip Tray (P1-4). Brand-matched: gold on navy, and the sunny theme inverts
   it the same way the chat cards do. Nothing here is a utility framework — one file,
   block-scoped to .vt-*, so it cannot collide with a page's own classes. */

.vt-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--vt-lift, 0px));
  z-index: 190;                      /* above the mascot (180) and its panel (181) */
  --vt-bg: rgba(10, 22, 40, .96);
  --vt-line: rgba(201, 162, 39, .38);
  --vt-text: #e8f0f7;
  --vt-muted: rgba(232, 240, 247, .66);
  --vt-gold: #e6c968;
  --vt-partner: #9ad0f5;
  --vt-ours: #7fd8a6;
  --vt-tbd: #f0b357;
  background: var(--vt-bg);
  border-top: 1px solid var(--vt-line);
  color: var(--vt-text);
  font: 14px/1.45 Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  backdrop-filter: blur(6px);
}

body.sunny .vt-bar {
  --vt-bg: rgba(255, 255, 255, .97);
  --vt-line: rgba(154, 92, 0, .28);
  --vt-text: #12304a;
  --vt-muted: rgba(18, 48, 74, .68);
  --vt-gold: #9a5c00;
  --vt-partner: #0b6f95;
  --vt-ours: #1c7a4d;
  --vt-tbd: #9a5c00;
}

/* Reserve the mascot's corner so the two never stand on each other. */
.vt-inner { max-width: 1180px; margin: 0 auto; padding: .45rem 132px .5rem 1rem; }

.vt-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: .25rem 0;
}
.vt-bar[data-vt-count]:not([data-vt-count="0"]) .vt-toggle { display: flex; }
.vt-pill-count { font-weight: 600; color: var(--vt-text); }
.vt-caret { color: var(--vt-gold); font-size: .7rem; }

.vt-sheet { display: flex; flex-direction: column; gap: .18rem; }
/* `hidden` is display:none in the UA sheet, and this file's own `display:flex` above
   beats it. Without this line the sheet is always open and the bar is 312px tall on
   every page — found in a browser, invisible to a DOM shim that has no stylesheet. */
.vt-sheet[hidden] { display: none; }

.vt-head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.vt-title { font-weight: 700; color: var(--vt-gold); font-family: Fraunces, Georgia, serif; }
.vt-pax { color: var(--vt-muted); font-size: .8rem; }

.vt-total { font-size: 1.02rem; font-weight: 700; }
.vt-scope { color: var(--vt-muted); font-size: .76rem; }

.vt-items { display: flex; flex-direction: column; gap: .28rem; margin: .25rem 0 .1rem; }
.vt-item {
  display: grid;
  grid-template-columns: 62px 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .3rem .4rem;
  border: 1px solid var(--vt-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
body.sunny .vt-item { background: rgba(18, 48, 74, .03); }
.vt-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-muted); }
.vt-body { display: flex; flex-direction: column; min-width: 0; }
.vt-name { color: var(--vt-text); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.vt-name:hover, a.vt-name:focus-visible { color: var(--vt-gold); text-decoration: underline; }
.vt-ful { font-size: .72rem; }
.vt-ful.is-partner { color: var(--vt-partner); }
.vt-ful.is-ours { color: var(--vt-ours); }
.vt-price { font-weight: 700; white-space: nowrap; }
.vt-price.vt-tbd { color: var(--vt-tbd); font-weight: 600; }
.vt-x {
  background: none; border: 0; color: var(--vt-muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .1rem .35rem; border-radius: 6px;
}
.vt-x:hover, .vt-x:focus-visible { color: var(--vt-text); background: rgba(255, 255, 255, .08); }

.vt-fresh, .vt-note { color: var(--vt-muted); font-size: .72rem; }
.vt-note { line-height: 1.5; }

/* P2-5 · "Before you go": the advisory for this trip's country, then visa, eSIM and
   insurance — four taps, one row, inside the sheet. The advisory chip is the only one
   that spans the full width, because it is the only one whose text varies; the three
   partner chips are fixed labels and share the rows between them. Severity is carried
   by colour alone on a small dot of text, never by a filled block: at Level 1 the
   traveller should not feel shouted at inside their own trip total. */
.vt-before { margin: .4rem 0 .15rem; padding-top: .45rem; border-top: 1px dashed var(--vt-line); }
.vt-before-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--vt-muted); margin-bottom: .32rem; }
.vt-b4s { display: flex; flex-wrap: wrap; gap: .3rem; }
.vt-b4 {
  display: inline-flex; align-items: center; gap: .32rem;
  max-width: 100%; padding: .3rem .62rem;
  border: 1px solid var(--vt-line); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: var(--vt-text);
  font-size: .76rem; line-height: 1.3; text-decoration: none;
}
body.sunny .vt-b4 { background: rgba(18, 48, 74, .04); }
a.vt-b4:hover, a.vt-b4:focus-visible { border-color: var(--vt-gold); color: var(--vt-gold); }
.vt-b4.is-adv { flex: 1 1 100%; }
.vt-b4 .vb-flag { flex: none; }
.vt-b4 .vb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-b4 .vb-lv { flex: none; margin-left: auto; padding-left: .35rem; font-weight: 700; color: var(--vb-c, var(--vt-muted)); }
.vt-b4.is-unknown .vb-lv { font-weight: 600; }
.vt-b4.lv0 { --vb-c: var(--vt-muted); }
.vt-b4.lv1 { --vb-c: var(--vt-ours); }
.vt-b4.lv2 { --vb-c: var(--vt-tbd); }
.vt-b4.lv3 { --vb-c: #ff9d5c; }
.vt-b4.lv4 { --vb-c: #ff7a6b; }
body.sunny .vt-b4.lv3 { --vb-c: #b3402c; }
body.sunny .vt-b4.lv4 { --vb-c: #992f1c; }

/* Page content must never hide behind the bar. */
body.voy-tray-live { padding-bottom: calc(64px + var(--vt-lift, 0px)); }

/* The mascot stands above the bar, always — the collapsed pill is a bar too. Height
   is whatever trip-tray.js measured, published as --vt-h; a fixed number looks right
   with two items and hides the mascot's feet with six. */
body.voy-tray-live #voyB { bottom: calc(var(--vt-h, 56px) + 10px); }

@media (max-width: 700px) {
  .vt-inner { padding: .4rem 92px .45rem .7rem; }
  .vt-item { grid-template-columns: 1fr auto auto; }
  .vt-kind { display: none; }
  /* Cap the open sheet. With a keyboard open the viewport is ~360px tall; an uncapped
     sheet filled 89% of it and pushed the mascot off the top of the screen. */
  .vt-sheet { max-height: 46vh; overflow-y: auto; }
  .vt-items { max-height: 30vh; overflow-y: auto; }
  body.voy-tray-live #voyB { bottom: calc(var(--vt-h, 52px) + 8px); }
}

@media print {
  .vt-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-bar, .vt-item, .vt-x { transition: none !important; }
}