/* ============================================================
   CTA — the Request a place traveller.
   A pill that rides along the bottom of the screen as the page scrolls,
   left edge at the top of the page, right edge at the bottom, dragging a
   purple line behind it on a hairline track. Every Request a place on
   the page opens the same panel (cta.js). Values from the design
   language: #6736E2 pill, 40px radius, Manrope 600, hairline
   rgba(227,227,227,.45), no shadows.
   ============================================================ */

.selr-traveller {
  position: fixed;
  left: 20px; right: 20px; bottom: 22px;
  height: 54px;
  z-index: 60;
  pointer-events: none;
  --tv-x: 0px;         /* pill translate, set by cta.js */
  --tv-w: 0px;         /* pill width, set by cta.js */
}
.selr-traveller-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(36, 36, 36, .14);
  transform: translateY(-.5px);
}
.selr-traveller-fill {
  position: absolute; left: 0; top: 50%;
  height: 2px; width: calc(var(--tv-x) + var(--tv-w) * .5);
  background: #6736E2; border-radius: 2px;
  transform: translateY(-1px);
}
.selr-traveller-pill {
  position: absolute; left: 0; top: 0;
  transform: translateX(var(--tv-x));
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 8px 0 20px; border-radius: 40px;
  background: #6736E2; color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.selr-traveller-pill:hover { background: #5024C0; }
.selr-traveller-pill:active { transform: translateX(var(--tv-x)) scale(.98); }
/* the arrow: a small ring with a chevron, ink stroke rule (surface on purple) */
.selr-traveller-pill .tv-arrow {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,250,.55);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.selr-traveller-pill .tv-arrow::before {
  content: ""; width: 6px; height: 6px;
  border-right: 2px solid #FFFFFA; border-bottom: 2px solid #FFFFFA;
  transform: translateX(-1px) rotate(-45deg);
}
/* enters after the hero has settled */
.selr-traveller { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1); }
.selr-traveller.is-on { opacity: 1; transform: none; }

/* the old bottom-right pill on mobile gives way to the traveller; the top
   corner is carried by the chip in the bar itself (.selr-nav-cta, deck.css) */
@media (max-width: 809.98px) {
  .selr-float-cta { display: none; }
  .selr-traveller { left: 14px; right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .selr-traveller, .selr-traveller-pill { transition: none; }
}


/* The city on the pill. There is a day like this in several cities and this
   pill is the one control on screen at every scroll position, so it says which
   one. Its own rounded chip on the right, knocked out of the purple, so it
   reads as a tag rather than more of the button's label. */
.selr-traveller-pill .tv-label { padding-right: 2px; }
.selr-traveller-pill .tv-city {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 16px; border-radius: 30px;
  background: rgba(255, 255, 250, .16);
  color: #FFFFFA; font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  flex: none;
}
@media (max-width: 809.98px) {
  .selr-traveller { height: 48px; bottom: 18px; }
  .selr-traveller-pill { height: 48px; font-size: 15px; padding: 0 6px 0 16px; }
  .selr-traveller-pill .tv-city { height: 34px; padding: 0 13px; font-size: 14px; }
}