/* Only the new booking toolbar needs these utilities from the current build.
   Keep them in Tailwind's existing utility layer; all other global CSS stays live. */
@layer utilities {
  @media (min-width: 360px) {
    [data-ibe-page] .min-\[360px\]\:w-28 { width: calc(var(--spacing) * 28); }
  }
  @media (min-width: 40rem) {
    [data-ibe-page] .sm\:h-9 { height: calc(var(--spacing) * 9); }
    [data-ibe-page] .sm\:h-14 { height: calc(var(--spacing) * 14); }
    [data-ibe-page] .sm\:w-44 { width: calc(var(--spacing) * 44); }
    [data-ibe-page] .sm\:flex-nowrap { flex-wrap: nowrap; }
  }
  @media (min-width: 64rem) {
    [data-ibe-page] .lg\:mr-2 { margin-right: calc(var(--spacing) * 2); }
    [data-ibe-page] .lg\:w-48 { width: calc(var(--spacing) * 48); }
  }
}

/* The booking page has its own navigation. This also preserves the old compact
   stylesheet's height contract if that route-specific stylesheet is removed. */
:root:has([data-ibe-page]) { --site-header-height: 0px; }

/* The selected criteria may wrap. Use the height measured by IbeFrame rather
   than the previous fixed 56px toolbar assumption. */
@media (min-width: 1180px) {
  [data-ibe-document-height] {
    scroll-margin-top: calc(var(--ibe-header-height, var(--site-header-height)) + var(--ibe-toolbar-height, 56px));
  }
  [data-ibe-document-height] > iframe {
    min-height: calc(100dvh - var(--ibe-header-height, var(--site-header-height)) - var(--ibe-toolbar-height, 56px) - 1px);
  }
}