/* trip planner (trip.js), background music button, motion */
.tv-head { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:2px 2px 10px; }
.tv-title { margin:0; font-size:24px; letter-spacing:-.3px; }
.tv-from { color:var(--dim); font-size:13px; display:flex; align-items:center; gap:6px; }
.tv-from select { border-radius:14px; border:1px solid var(--rim); background:var(--panel2); color:var(--ink); font:inherit; font-weight:700; padding:6px 8px; }
.tv-from select option { color:#111; }
.tv-search { width:100%; min-height:46px; border-radius:16px; border:1px solid var(--rim); background:var(--panel2); color:var(--ink); font:inherit; padding:0 14px; margin:0 0 10px; outline:none; }
.tv-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tv-card { position:relative; min-height:190px; border-radius:24px; overflow:hidden; text-align:left; color:#fff; display:flex; align-items:flex-end;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 30px rgba(0,0,0,.35); opacity:0; transform:translateY(16px) scale(.98);
  animation:tvIn .55s var(--d, 0ms) cubic-bezier(.2,.8,.2,1) forwards; background:#1a1a22; }
@keyframes tvIn { to { opacity:1; transform:none; } }
.tv-card .ph { position:absolute; inset:0; background:var(--img) center/cover no-repeat, linear-gradient(135deg, #1D4ED8, #0E7490); transform:scale(1.08); transition:transform 6s ease; }
.tv-card:active .ph { transform:scale(1.15); }
.tv-card .sh { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.82)); }
.tv-card .tx { position:relative; padding:12px; display:flex; flex-direction:column; gap:3px; width:100%; }
.tv-card .nm { font-size:17px; font-weight:800; display:flex; align-items:center; gap:6px; }
.tv-card .pr b { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; } .tv-card .pr small { font-size:11px; opacity:.85; }
.tv-card .mt { font-size:11px; opacity:.75; }
.tv-deal { position:absolute; top:10px; left:10px; padding:4px 9px; border-radius:12px; font-size:11px; font-weight:800; color:#0B2B1D; background:#7FE0AE; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.sheet.tv-sheet { max-height:96vh; }
.tv-hero { position:relative; margin:-4px -4px 14px; min-height:260px; border-radius:26px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; }
.tv-hero .ph { position:absolute; inset:-20px; background:var(--img) center/cover no-repeat, linear-gradient(135deg, #0E7490, #1D4ED8); animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform:scale(1.05) translate(0, 0); } to { transform:scale(1.18) translate(-12px, -8px); } }
.tv-hero .sh { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.85)); }
.tv-hero .tx { position:relative; padding:16px; } .tv-hero .k { font-size:12px; opacity:.85; display:flex; align-items:center; gap:6px; }
.tv-hero h1 { margin:4px 0 6px; font-size:36px; letter-spacing:-.6px; } .tv-hero p { margin:0; font-size:13px; line-height:1.45; opacity:.9; }
.tv-kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tv-kpis .card { margin:0 !important; padding:12px 14px; border-radius:20px; display:flex; flex-direction:column; gap:2px; }
.tv-kpis .card.wide { grid-column:1 / -1; }
.tv-kpis .k { color:var(--dim); font-size:12px; } .tv-kpis b { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--gold); }
.tv-kpis .s { color:var(--dim); font-size:12px; } .tv-kpis em { font-style:normal; font-weight:700; } .tv-kpis em.dn { color:#7FE0AE; } .tv-kpis em.up { color:#FF9EA1; }
.tv-kpis .row3 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tv-chart { padding:14px 10px 10px; }
.tv-bars { display:flex; align-items:flex-end; gap:6px; height:150px; }
.tv-bars .b { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.tv-bars .b i { width:100%; max-width:34px; height:var(--h); border-radius:8px 8px 4px 4px; background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  transform-origin:bottom; transform:scaleY(0); animation:grow .7s var(--d) cubic-bezier(.2,.8,.2,1) forwards; }
.tv-bars .b.best i { background:linear-gradient(180deg, #FFE27A, #C99A2E); box-shadow:0 0 18px rgba(248,218,85,.35); }
@keyframes grow { to { transform:scaleY(1); } }
.tv-bars .v { font-size:10px; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; } .tv-bars .b.best .v { color:var(--gold); font-weight:800; }
.tv-bars .l { font-size:11px; color:var(--dim); text-transform:capitalize; white-space:nowrap; } .tv-bars .s { font-size:10px; color:var(--faint); }
.tv-bars.wide .l { font-size:10px; }
.tv-note { margin:10px 6px 2px; font-size:13px; line-height:1.4; } .tv-axis { text-align:center; font-size:10px; color:var(--faint); margin-top:2px; }
.tv-hours { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.tv-hours .card { margin:0 !important; padding:10px 6px; text-align:center; border-radius:16px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tv-hours .card.best { box-shadow:inset 0 0 0 1.5px var(--gold); } .tv-hours b { font-size:16px; font-variant-numeric:tabular-nums; } .tv-hours small { color:var(--dim); font-size:11px; }
.tv-car { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); }
.tv-car:first-child { border-top:0; } .tv-car b { font-size:17px; font-variant-numeric:tabular-nums; }
.tv-car .t1 { font-weight:600; } .tv-car .t2 { color:var(--dim); font-size:12px; }
.tv-hotel { display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border-top:1px solid var(--line); color:var(--ink); text-align:left; }
.tv-hotel:first-child { border-top:0; } .tv-hotel .stars { color:var(--gold); font-size:12px; letter-spacing:1px; min-width:62px; }
.tv-sights { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 12px 6px; margin:0 -12px; scrollbar-width:none; }
.tv-sights::-webkit-scrollbar { display:none; }
.tv-sight { position:relative; flex:0 0 62%; max-width:240px; height:170px; border-radius:22px; overflow:hidden; scroll-snap-align:start; color:#fff; text-align:left; display:flex; align-items:flex-end; padding:12px;
  background:var(--img) center/cover no-repeat, #222; opacity:0; animation:tvIn .5s var(--d) cubic-bezier(.2,.8,.2,1) forwards; }
.tv-sight .sh { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8)); } .tv-sight b { position:relative; font-size:15px; }
.tv-cta { position:sticky; bottom:0; padding:12px 0 4px; }
.tv-cta .btn { width:100%; min-height:52px; font-size:16px; }
.bgm-btn.on { color:var(--gold); }
.eqi { display:flex; gap:2px; align-items:flex-end; height:16px; } .eqi i { width:3px; border-radius:2px; background:var(--gold); animation:spBar 1s ease-in-out infinite; }
.eqi i:nth-child(2) { animation-delay:-.3s; } .eqi i:nth-child(3) { animation-delay:-.6s; }
.view-enter .card, .view-enter .block { animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
.view-enter .block:nth-of-type(2) { animation-delay:.05s; } .view-enter .block:nth-of-type(3) { animation-delay:.1s; } .view-enter .block:nth-of-type(4) { animation-delay:.15s; }
.view-enter .block:nth-of-type(n+5) { animation-delay:.2s; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.motes { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.motes i { position:absolute; left:var(--x); bottom:-20px; width:var(--s); height:var(--s); border-radius:50%; background:radial-gradient(circle, rgba(255,226,122,.55), rgba(255,226,122,0) 70%);
  animation:float var(--t) linear infinite; animation-delay:var(--dl); }
@keyframes float { 0% { transform:translate(0, 0); opacity:0; } 10% { opacity:.8; } 90% { opacity:.6; } 100% { transform:translate(30px, -110vh); opacity:0; } }
.fy { animation:rise .6s cubic-bezier(.2,.8,.2,1) both; }
.fy:nth-child(2) { animation-delay:.08s; } .fy:nth-child(3) { animation-delay:.16s; } .fy:nth-child(4) { animation-delay:.24s; }

/* trip planner */
.pl-h { font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--dim); margin:16px 2px 8px; }
.ochip.pl { color:var(--ink); background:var(--panel2); border:1px solid var(--rim); }
.ochip.pl.on { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.pl-step { display:flex; align-items:center; gap:14px; } .pl-step button { width:42px; height:42px; border-radius:21px; background:var(--panel2); border:1px solid var(--rim); color:var(--ink); font-size:22px; }
.pl-step b { font-size:26px; min-width:30px; text-align:center; font-variant-numeric:tabular-nums; }
.pl-go { width:100%; min-height:56px; margin-top:22px; font-size:17px; }
.pl-loading { display:grid; place-items:center; gap:14px; padding:60px 0; color:var(--dim); } .pl-loading .eq { display:flex; gap:5px; align-items:flex-end; height:40px; }
.pl-loading .eq b { width:6px; border-radius:3px; background:linear-gradient(180deg, #FFE27A, #C99A2E); animation:spBar 1s ease-in-out infinite; }
.pl-loading .eq b:nth-child(2n) { animation-duration:.7s; } .pl-loading .eq b:nth-child(3n) { animation-duration:1.3s; }
.pl-sub { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--dim); padding:10px 14px 0; }
.pl-fl { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:8px 14px 12px; }
.pl-fl b { font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; } .pl-fl .t1 { font-weight:600; } .pl-fl .t2 { color:var(--dim); font-size:12px; }
.pl-days { display:grid; gap:8px; }
.pl-day { display:grid; grid-template-columns:34px 1fr 58px; gap:12px; align-items:center; padding:10px 12px; border-radius:18px; background:var(--panel); border:1px solid var(--rim);
  opacity:0; animation:tvIn .5s var(--d) cubic-bezier(.2,.8,.2,1) forwards; }
.pl-day .n { width:34px; height:34px; border-radius:17px; display:grid; place-items:center; background:var(--gold); color:var(--on-gold); font-weight:800; }
.pl-day .t1 { font-weight:700; } .pl-day .t2 { color:var(--dim); font-size:12px; line-height:1.35; }
.pl-day img { width:58px; height:58px; border-radius:14px; object-fit:cover; }

/* hotels with prices (Xotelo) */
.tv-stays { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 12px 6px; margin:0 -12px; scrollbar-width:none; }
.tv-stays::-webkit-scrollbar { display:none; }
.tv-stay { position:relative; flex:0 0 64%; max-width:250px; height:190px; border-radius:22px; overflow:hidden; scroll-snap-align:start; color:#fff; text-align:left;
  display:flex; align-items:flex-end; opacity:0; animation:tvIn .5s var(--d) cubic-bezier(.2,.8,.2,1) forwards; background:#222; }
.tv-stay .ph { position:absolute; inset:0; background:var(--img) center/cover no-repeat; }
.tv-stay .sh { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.85)); }
.tv-stay .rt { position:absolute; top:10px; left:10px; padding:4px 9px; border-radius:12px; font-size:12px; font-weight:800; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); color:#FFE27A; }
.tv-stay .rt small { color:#fff; font-weight:500; }
.tv-stay .tx { position:relative; padding:12px; display:flex; flex-direction:column; gap:3px; }
.tv-stay .tx b { font-size:15px; line-height:1.2; } .tv-stay .tx span { font-size:13px; color:#FFE27A; font-weight:700; }
.credit { text-align:center; font-size:11px; color:var(--faint); margin:14px 0 4px; letter-spacing:.2px; }
.splash .credit { position:absolute; bottom:calc(8px + var(--safe-b, 0px)); left:0; right:0; color:rgba(255,255,255,.35); margin:0; opacity:0; animation:spFade .8s 1.6s forwards; }

/* trip assistant */
.as-box { position:relative; display:flex; align-items:center; gap:8px; width:100%; padding:6px 6px 6px 12px; margin:0 0 10px; border-radius:22px;
  background:linear-gradient(var(--panel2), var(--panel2)) padding-box, linear-gradient(120deg, #FFE27A, #C2407A, #6A3DE8, #0E7490, #FFE27A) border-box;
  border:1.5px solid transparent; background-size:100% 100%, 300% 300%; animation:asBorder 6s linear infinite; box-shadow:0 10px 30px rgba(248,218,85,.12); }
@keyframes asBorder { to { background-position:0 0, 300% 0; } }
.as-box .as-ic { color:var(--gold); display:grid; place-items:center; } .as-box .as-ic svg.i { width:20px; height:20px; animation:asPulse 2.4s ease-in-out infinite; }
@keyframes asPulse { 50% { transform:scale(1.2) rotate(15deg); } }
.as-box input { flex:1; min-width:0; min-height:40px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; outline:none; }
.as-box button { min-height:40px; padding:0 14px; border-radius:18px; font-weight:700; color:var(--on-gold); background:var(--gold); }
.as-top { margin:0 0 12px; }
.as-head { display:flex; gap:12px; align-items:flex-start; }
.as-head > span { width:40px; height:40px; border-radius:20px; display:grid; place-items:center; background:linear-gradient(135deg, #6A3DE8, #C2407A); color:#fff; flex:none; }
.as-head .k { color:var(--dim); font-size:12px; } .as-head .q { font-weight:600; line-height:1.35; }
.as-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.as-chips span { padding:6px 11px; border-radius:16px; font-size:13px; font-weight:600; background:var(--gold-soft); color:var(--gold);
  opacity:0; animation:tvIn .4s cubic-bezier(.2,.8,.2,1) forwards; }
.as-chips span:nth-child(2) { animation-delay:.06s; } .as-chips span:nth-child(3) { animation-delay:.12s; } .as-chips span:nth-child(4) { animation-delay:.18s; }
.as-chips span:nth-child(n+5) { animation-delay:.24s; }
.pl-budget { margin:10px 0 0; padding:10px 14px; border-radius:16px; font-size:13px; font-weight:600; }
.pl-budget.over { background:rgba(229,72,77,.14); color:#FF9EA1; } .pl-budget.ok { background:rgba(47,182,124,.14); color:#8FE3B8; }