/* Bowtt app-download prompt.
 *
 * It used to be a fixed card at the TOP of the screen, which covered the
 * passenger's pickup field and the captain's Online/Offline switch on first
 * visit — the two controls each role needs first. It is now a slim strip
 * docked directly above the bottom navigation: still unmissable, still
 * dismissible, but never on top of anything anyone is trying to use.
 */
.bowtt-app-banner{
  position:fixed;
  left:0;right:0;
  bottom:calc(var(--bottom-nav-h, 62px) + var(--bowt-safe-bottom, 0px));
  z-index:60;
  max-width:560px;margin:0 auto;
  background:#f0f9ff;
  border-top:1px solid #d9eefb;
  border-bottom:1px solid #d9eefb;
  padding:8px 12px;
  display:flex;align-items:center;gap:10px;
}
.bowtt-app-banner.d-none{display:none!important}

.bowtt-app-banner-icon{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:#e0f2fe;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.bowtt-app-banner-copy{min-width:0;flex:1}
.bowtt-app-banner-title{
  font-size:13px;font-weight:700;color:#0f172a;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The longer explanation only fits on a card, and this is no longer one. */
.bowtt-app-banner-text{display:none}

.bowtt-app-banner-action{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:#087fb8;color:#fff;text-decoration:none;border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:700;flex:0 0 auto;
}
.bowtt-app-banner-action:hover{color:#fff;background:#056793}
.bowtt-app-banner-close{
  position:static;flex:0 0 auto;
  border:0;background:transparent;color:#8aa0ae;font-size:19px;line-height:1;
  cursor:pointer;padding:2px 4px;
}

/* Booking page: the fare + "Find me a boat" bar sits in exactly this spot once
   a route is chosen, and nothing may cover it. The strip shows on the opening
   "Where to?" screen and steps aside while a trip is being built. */
body[data-ui-state="selected"] .bowtt-app-banner,
body[data-ui-state="editing"] .bowtt-app-banner{display:none!important}

/* Pages scroll under the strip, so give the content room to clear it. */
body.has-app-strip .bowt-page,
body.has-app-strip .ride-page,
body.has-app-strip .captain-page{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

/* Phones only get the in-app login shortcut. */
.bowtt-app-login-button{
  display:none;margin:14px auto 0;width:max-content;max-width:100%;
  align-items:center;justify-content:center;gap:7px;padding:9px 13px;
  border:1px solid #bae6fd;border-radius:10px;background:#f0f9ff;color:#0369a1;
  text-decoration:none;font-size:12px;font-weight:700;
}
.bowtt-app-login-button.d-none{display:none!important}
@media(max-width:767px){.bowtt-app-login-button{display:inline-flex}}

/* Desktop: the bottom tab bar moves to the top of the window, so there is no
   bar above which to dock. Sit at the bottom of the window instead — and on
   the booking page stay clear of the left panel, whose own fare bar is pinned
   to the bottom of that panel. */
@media(min-width:900px){
  .bowtt-app-banner{bottom:0;max-width:none;border-bottom:0;border-radius:0}
  body[data-ui-state] .bowtt-app-banner{left:min(420px,38vw)}
}