.mobile-booking-bar,
.mobile-booking-bar * {
  box-sizing: border-box;
}

.mobile-booking-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-booking-bar {
    background: var(--booking-bar-accent);
    border-top: 0;
    bottom: 0;
    box-shadow: 0 -10px 30px rgba(20, 55, 50, 0.15);
    display: block;
    left: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    transform: translateY(calc(100% + 8px));
    transition: transform 220ms ease, visibility 220ms;
    visibility: hidden;
    z-index: 9998;
  }

  .mobile-booking-bar[data-visible="true"] {
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .mobile-booking-bar__link,
  .mobile-booking-bar__link:hover,
  .mobile-booking-bar__link:focus,
  .mobile-booking-bar__link:active {
    align-items: center;
    background: var(--booking-bar-accent) !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    color: var(--booking-bar-text) !important;
    display: flex;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    letter-spacing: 0.02em;
    margin: 0;
    max-width: none;
    min-height: 64px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    text-decoration: none !important;
    width: 100%;
  }

  .mobile-booking-bar__link:focus-visible {
    outline: 3px solid #254f48;
    outline-offset: -5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-booking-bar {
    transition: none;
  }
}