/* Van Balloons — vanballoons.ca. Base look ported from the claude.ai/design
   handoff; state + hover classes here because base styles ship inline in the
   seeded page (hence the !important on state overrides). */

html { scroll-behavior: smooth; }
body { background: #FAE0C7 !important; margin: 0; padding: 0; }

.vb-wrap, .vb-fab {
  color: #1c1a17;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
.vb-wrap a { color: #1c1a17; text-decoration: none; }
.vb-wrap a:hover { color: #4EB09B; }

@keyframes vbdrift {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-13px) rotate(3deg); }
}

/* ---------- hover / focus (base styles are inline on the elements) ---------- */
.vbh-white-dark:hover { background: #ffffff !important; color: #1c1a17 !important; }
.vbh-dark-fill:hover { background: #1c1a17 !important; color: #ffffff !important; }
.vbh-glass-74:hover { background: rgba(255, 255, 255, 0.74) !important; }
.vbh-glass-40:hover { background: rgba(255, 255, 255, 0.4) !important; }
.vbh-thumb:hover { background: rgba(255, 255, 255, 0.18) !important; transform: translateY(-3px); }
.vb-input:focus { border-color: #1c1a17 !important; background: rgba(255, 255, 255, 0.78) !important; }

/* ---------- state classes toggled by vanballoons.js ---------- */
.vb-dot.is-on { background: #1c1a17 !important; }
.vb-kind.is-sel { background: #1c1a17 !important; color: #ffffff !important; border-color: #1c1a17 !important; }
.vb-steps.is-slide { opacity: 0 !important; transform: translateX(14px) !important; }
.vb-cal.is-open { max-height: 400px !important; opacity: 1 !important; }
.vb-chev.is-open { transform: rotate(180deg); }
.vb-code.is-on { opacity: 1 !important; transform: none !important; }
.vb-reward.is-on { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.vb-featwrap.is-fade { opacity: 0; transform: translateY(10px); }

/* ---------- floating balloon menu ---------- */
@keyframes vbfloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}
.vb-fab {
  position: fixed; right: 18px; bottom: 14px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.vb-fab-menu {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom right;
  pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-fab-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.vb-fab a { text-decoration: none; }
.vb-fab-pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 14px 30px -18px rgba(28, 26, 23, 0.5);
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #1c1a17;
  cursor: pointer;
}
.vb-fab-pill:hover { background: #ffffff; color: #1c1a17; }
.vb-fab-pill-hot { background: #FFB6AF; border-color: #FFB6AF; }
.vb-fab-pill-hot:hover { background: #ffffff; }
.vb-fab-btn {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  width: 74px; height: 132px; position: relative; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.vb-fab-bob {
  position: absolute; inset: 0; display: block;
  animation: vbfloat 4.6s ease-in-out infinite; will-change: transform;
  filter: drop-shadow(0 16px 18px rgba(28, 26, 23, 0.28));
}
.vb-fab-balloon {
  position: absolute; left: 50%; top: 0; width: 64px; height: 64px; margin-left: -32px;
  border-radius: 50% 50% 47% 47% / 50% 50% 53% 53%;
  background: radial-gradient(circle at 33% 28%, #ffd9d4 0%, #F28076 48%, #d95f56 100%);
  transition: transform 0.18s ease;
}
.vb-fab-btn:hover .vb-fab-balloon { transform: scale(1.06); }
.vb-fab-btn:active .vb-fab-balloon { transform: scale(0.94); }
.vb-fab-glint {
  position: absolute; left: 12px; top: 9px; width: 16px; height: 22px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.75);
  transform: rotate(-24deg); filter: blur(1px);
}
.vb-fab-bars {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 18px;
  transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: space-between;
}
.vb-fab-bars span {
  display: block; height: 3.5px; border-radius: 3px; background: #ffffff;
  box-shadow: 0 1px 1px rgba(28, 26, 23, 0.18);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.vb-fab-btn.is-open .vb-fab-bars span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.vb-fab-btn.is-open .vb-fab-bars span:nth-child(2) { opacity: 0; }
.vb-fab-btn.is-open .vb-fab-bars span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }
.vb-fab-knot {
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid #d95f56;
}
.vb-fab-string {
  position: absolute; left: 50%; top: 69px; width: 20px; height: 64px; margin-left: -10px;
}

/* ---------- fab "Book" morph: the nav pills hand off to the full booking
   form in the same floating popup (vanballoons.js moves #booking's actual
   DOM node in here, so all its existing behaviour just keeps working). ---------- */
.vb-book-sheet {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(28, 26, 23, 0); pointer-events: none;
  transition: background 0.28s ease;
}
.vb-book-sheet.is-open { background: rgba(28, 26, 23, 0.55); pointer-events: auto; }
.vb-book-sheet-panel {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #FFFBF4; border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(28, 26, 23, 0.5);
  transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
  box-sizing: border-box;
}
.vb-book-sheet.is-open .vb-book-sheet-panel { transform: translateY(0); }
.vb-book-sheet-grab {
  width: 38px; height: 4px; border-radius: 2px; margin: 8px auto 2px;
  background: rgba(28, 26, 23, 0.18);
}
.vb-book-sheet-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid #1c1a17; background: rgba(255, 255, 255, 0.7);
  color: #1c1a17; font: 600 15px 'Outfit', sans-serif; line-height: 1; cursor: pointer;
}
.vb-book-sheet #booking { flex: none !important; width: 100%; box-sizing: border-box; margin-top: 6px; }

/* ---------- responsive: tablet + mobile ---------- */
@media (max-width: 1024px) {
  .vb-fab { right: 14px; bottom: 10px; }
}
@media (max-width: 760px) {
  .vb-nav { display: none !important; }         /* the balloon menu takes over nav */
  .vb-header { top: 8px !important; }
  .vb-faq-a { padding-right: 0 !important; }
  .vb-fab-btn { width: 64px; height: 112px; }
  .vb-fab-balloon { width: 56px; height: 56px; margin-left: -28px; }
  .vb-fab-knot { top: 54px; }
  .vb-fab-string { top: 61px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vb-fab-bob { animation: none; }
  .vb-wrap [style*="vbdrift"] { animation: none !important; }
}