/* App-style bottom navigation bar, mobile only. Site-wide via
   include/footer.php. Desktop keeps its existing top navbar untouched -
   this file only ever applies at the same <=600px breakpoint already
   used by chatbot-widget.css and the cookie-consent gear, so all the
   mobile-only overrides below (repositioning the floating chatbot
   bubble/teaser, the cookie-consent gear, #return-to-top, and hiding
   the live-travel-widget card) share one consistent cutoff with no gap
   window where two fixed elements could still collide. */
:root {
  --bn-height: 64px;
  --bn-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.bn-bar {
  display: none;
}

.bn-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 999994;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 20, 27, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.bn-sheet-overlay.bn-visible { opacity: 1; visibility: visible; }

.bn-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 72vh;
  padding: 18px 18px calc(18px + var(--bn-safe-bottom));
  border-radius: 18px 18px 0 0;
  background: linear-gradient(165deg, #0c5069 0%, #04384c 65%, #052e3d 100%);
  box-shadow: 0 -16px 48px rgba(4, 56, 76, 0.45);
  transform: translateY(16px);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
}
.bn-sheet-overlay.bn-visible .bn-sheet { transform: translateY(0); }

.bn-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bn-sheet-header h4 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.bn-sheet-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #dce8ec;
  font-size: 14px;
  cursor: pointer;
}
.bn-sheet-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.bn-sheet-body { overflow-y: auto; }
.bn-sheet-body p.bn-empty {
  margin: 10px 0 4px;
  color: #cfe1e7;
  font-size: 13.5px;
  line-height: 1.5;
}

.bn-fav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bn-fav-item:last-child { border-bottom: 0; }
.bn-fav-item img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}
.bn-fav-item a {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.bn-fav-item a:hover { color: #a7dc34; }
.bn-fav-delete {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd6d6;
  cursor: pointer;
  font-size: 12px;
}
.bn-fav-delete:hover { background: rgba(220, 70, 70, 0.25); }

@media (max-width: 600px) {
  .bn-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999992;
    height: var(--bn-height);
    padding-bottom: var(--bn-safe-bottom);
    background: linear-gradient(180deg, #0c5069, #04384c);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(4, 56, 76, 0.35);
    font-family: "Poppins", sans-serif;
  }

  .bn-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10.5px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-tab i { font-size: 19px; }
  .bn-tab span { font-weight: 500; }

  .bn-tab.is-active { color: #a7dc34; }
  .bn-tab.is-active i { color: #a7dc34; }

  /* Page content clearance for the fixed bar, site-wide. Colored dark
     teal (not left as default white) so the extra space seamlessly
     extends the footer's own background instead of showing as a pale
     gap between the footer and the new bar while scrolling. */
  body {
    padding-bottom: calc(var(--bn-height) + var(--bn-safe-bottom));
    background-color: #071b26;
  }

  /* The bottom nav's own Reise-Bot tab now covers what the floating
     chatbot bubble did, so the bubble (and its teaser speech bubble)
     are redundant clutter alongside a bar that's always on screen -
     hidden here rather than repositioned. The panel itself is left
     untouched so opening it via the tab still works normally; only its
     containing root's bottom offset is raised to clear the new bar. */
  .cbw-toggle,
  .cbw-teaser { display: none !important; }
  .cbw-root { bottom: calc(var(--bn-height) + var(--bn-safe-bottom) + 14px) !important; }

  /* Cookie-consent reopen gear and "back to top" - both float bottom
     and would otherwise sit under/behind the new bar. */
  #cookie-consent-gear { bottom: calc(var(--bn-height) + var(--bn-safe-bottom) + 12px) !important; }
  #return-to-top { bottom: calc(var(--bn-height) + var(--bn-safe-bottom) + 12px) !important; }

  /* Already hidden at the slightly narrower 575.98px breakpoint - restated
     here at this file's own 600px cutoff so there's no 576-600px window
     where it would still show and collide with the new bar. */
  .live-travel-widget { display: none !important; }
}