:root { --route-duration: 1.02s; }

body::after {
  content: "";
  position: fixed;
  z-index: 620;
  inset: 0;
  pointer-events: none;
  background: #14151d;
  visibility: hidden;
  transform: translate3d(0, 101%, 0);
}

body.is-route-leaving::after {
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: transform var(--route-duration) cubic-bezier(.76,0,.24,1);
}

html.is-route-transition body::before,
html.is-reload body::before {
  content: "";
  position: fixed;
  z-index: 618;
  inset: 0;
  pointer-events: none;
  background: #14151d;
  animation: route-reveal .96s cubic-bezier(.16,1,.3,1) both;
}

html.is-route-transition .sub-loader,
html.is-route-transition .loader,
html.is-reload .sub-loader,
html.is-reload .loader { display: none; }

@keyframes route-reveal {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(0,-101%,0); }
}

.header-booking-menu {
  position: fixed;
  z-index: 190;
  top: 70px;
  right: max(var(--pad, 18px), 18px);
  width: min(720px, calc(100vw - max(var(--pad, 18px), 18px) * 2));
  padding: 18px 20px 22px;
  color: #f4f1ed;
  background: rgba(20, 21, 29, .97);
  border: 1px solid rgba(244, 241, 237, .16);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(8, 9, 14, .3);
  backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -18px, 0) scale(.975);
  transform-origin: 88% 0;
  transition: visibility 0s linear .62s, opacity .46s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
}

.header-booking-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.header-booking-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 16px;
  font: 500 10px/1.2 var(--sans, Arial, sans-serif);
  letter-spacing: .04em;
}

.header-booking-menu__top > span { opacity: .62; }
.header-booking-menu__top button { color: inherit; }

.header-booking-menu nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 241, 237, .18);
}

.header-booking-menu nav a {
  position: relative;
  min-width: 0;
  padding: 24px 42px 14px 2px;
  font: 400 clamp(2rem, 3.25vw, 3.9rem)/.86 var(--serif, Georgia, serif);
  letter-spacing: -.045em;
  transition: padding-left .52s cubic-bezier(.16,1,.3,1), color .42s ease, opacity .42s ease;
}

.header-booking-menu nav a + a {
  padding-left: 22px;
  border-left: 1px solid rgba(244, 241, 237, .18);
}

.header-booking-menu nav a em {
  display: block;
  font-style: italic;
}

.header-booking-menu nav a span {
  position: absolute;
  top: 25px;
  right: 10px;
  font: 400 18px/1 var(--sans, Arial, sans-serif);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.header-booking-menu nav a:hover,
.header-booking-menu nav a:focus-visible { padding-left: 12px; color: #fff; }
.header-booking-menu nav a + a:hover,
.header-booking-menu nav a + a:focus-visible { padding-left: 32px; }
.header-booking-menu nav a:hover span,
.header-booking-menu nav a:focus-visible span { transform: translate3d(5px, -5px, 0); }

@media (max-width: 900px) {
  .header-booking-menu {
    top: 64px;
    width: calc(100vw - 36px);
    padding: 16px 18px 20px;
  }
  .header-booking-menu nav { grid-template-columns: 1fr; }
  .header-booking-menu nav a { font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .header-booking-menu nav a + a { padding-left: 2px; border-left: 0; border-top: 1px solid rgba(244, 241, 237, .18); }
  .header-booking-menu nav a + a:hover,
  .header-booking-menu nav a + a:focus-visible { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-route-leaving::after { transition-duration: .01ms; }
  html.is-route-transition body::before,
  html.is-reload body::before { animation-duration: .01ms; }
}
