/* Travel Value — shared search UX (Boss 2026-07-07).
   ONE home for the animated search loader + the creative failure/empty notice + the
   date-picker affordance, loaded globally by base.html so B2C and console share it. */

/* ---------- animated search loader (plane on a route + shimmer skeletons) ---------- */
.tv-loader{padding:14px 2px 4px}
.tv-route{position:relative;height:40px;max-width:540px;margin:8px auto 6px}
.tv-route .line{position:absolute;top:50%;left:6%;right:6%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 15px)}
.tv-route .fill{position:absolute;top:50%;left:6%;height:2px;width:0;transform:translateY(-50%);border-radius:2px;
  background:linear-gradient(90deg,var(--teal-500),var(--accent));animation:tvFill 2.2s ease-in-out infinite}
.tv-route .dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;box-shadow:0 2px 6px rgba(10,37,64,.2)}
.tv-route .dot.start{left:6%;border:2px solid var(--teal-500)}
.tv-route .dot.end{left:94%;border:2px solid var(--accent)}
.tv-route .glyph{position:absolute;top:50%;left:6%;font-size:20px;line-height:1;
  transform:translate(-50%,-50%);animation:tvFly 2.2s ease-in-out infinite;
  filter:drop-shadow(0 5px 6px rgba(40,170,225,.45))}
@keyframes tvFly{0%{left:6%}55%{left:94%}100%{left:94%}}
@keyframes tvFill{0%{width:0}55%{width:88%}100%{width:88%}}
.tv-copy{text-align:center;font-family:var(--display);font-size:19px;color:var(--ink);
  min-height:28px;margin-bottom:4px;animation:tvCopyFade .45s ease}
@keyframes tvCopyFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tv-skeletons{display:grid;gap:16px;margin-top:20px}
.tv-sk{background:linear-gradient(100deg,#eef2f4 30%,#f8fbfc 50%,#eef2f4 70%);
  background-size:220% 100%;animation:tvShimmer 1.35s linear infinite}
@keyframes tvShimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}
/* card skeleton — hotels / console products (photo + body + price rail) */
.tv-sk-card{display:grid;grid-template-columns:220px 1fr 210px;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;min-height:150px}
@media(max-width:760px){.tv-sk-card{grid-template-columns:1fr}}
.tv-sk-img{min-height:150px}
.tv-sk-body{padding:22px;display:flex;flex-direction:column;gap:12px}
.tv-sk-line{height:12px;border-radius:6px}.tv-sk-line.lg{width:62%;height:19px}
.tv-sk-line.md{width:44%}.tv-sk-line.sm{width:30%}
.tv-sk-side{border-left:1px solid var(--line);padding:22px;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;gap:12px}
@media(max-width:760px){.tv-sk-side{border-left:0;border-top:1px solid var(--line)}}
/* row skeleton — flights / cars / activities (a simple full-width line) */
.tv-sk-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 20px}
.tv-sk-row .tv-sk-badge{width:44px;height:44px;border-radius:10px;flex:0 0 auto}
.tv-sk-row .tv-sk-grow{flex:1;display:flex;flex-direction:column;gap:9px}

/* ---------- creative failure / empty-state notice ---------- */
.tv-notice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:44px 26px 40px;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 18px 44px -30px rgba(10,63,71,.4);max-width:560px;margin:8px auto;
  animation:tvNoticeIn .5s ease}
@keyframes tvNoticeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tv-art{width:132px;height:104px;margin-bottom:6px}
.tv-notice h3{font-family:var(--display);font-weight:500;font-size:24px;color:var(--ink);line-height:1.15}
.tv-notice p{color:var(--ink-muted);font-size:14.5px;max-width:410px;line-height:1.5}
.tv-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.tv-btn{border:0;border-radius:11px;padding:12px 20px;font-size:14.5px;font-weight:700;cursor:pointer;
  font-family:var(--body);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:filter .15s,transform .08s}
.tv-btn:hover{filter:brightness(1.05)}.tv-btn:active{transform:translateY(1px)}
.tv-btn.primary{background:linear-gradient(135deg,var(--teal-600),var(--teal-500));color:#fff;
  box-shadow:0 8px 20px -8px rgba(40,170,225,.7)}
.tv-btn.wa{background:#fff;color:var(--ink);border:1px solid var(--line)}
.tv-btn.wa svg{width:17px;height:17px}
/* drawn motifs animate their own parts */
.tv-art .bob{animation:tvBob 2.6s ease-in-out infinite;transform-origin:center}
.tv-art .swing{animation:tvSwing 2.8s ease-in-out infinite;transform-origin:72px 40px}
.tv-art .pulse{animation:tvPulse 2.4s ease-in-out infinite}
@keyframes tvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tvSwing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes tvPulse{0%,100%{opacity:.25}50%{opacity:.9}}

/* ---------- date field: the calendar ICON is the affordance (Boss 2026-07-07) ---------- */
/* the field itself no longer force-opens the picker; the native calendar indicator does */
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.8;padding:2px;
  border-radius:5px;transition:opacity .15s,background .15s}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--teal-50)}

/* base.html already kills animation under prefers-reduced-motion; keep a static fallback */
@media (prefers-reduced-motion:reduce){.tv-route .fill{width:88%}}