/* UNION booking toggle — "Enquire" / "Instant Booking" (2026-09-18)
   ---------------------------------------------------------------------------
   Brings UNION to parity with MIX and ZOOM, which already show this pair above
   the booking form.

   WHY THIS DOES NOT REUSE THE SHARED .jsBookBtn / .button-block HOOKS
   MIX and ZOOM drive their toggle through the shared template.js handler:

       $(document).on('click', '.jsBookBtn', function () {
         $('.button-block button.active').removeClass('active');   // <- GLOBAL
         ...
         $('.jsBookBlocks').hide();                                 // <- GLOBAL
         $('#jsBookBlock_' + $(this).data('id')).show(1000);
       });

   Both selectors are document-wide. On UNION that is not safe: /engineers/
   renders the engineer-tier filter as `<div class="button-block mb-5 mt-5">`
   with an `.active` button (data-id="ALL"), and the union_studio booking
   component renders on that same page. Clicking the booking toggle there would
   silently strip the highlight off the engineer filter.

   So UNION gets its own class names and a listener scoped to its own
   `.un-booking` root. Nothing outside that root is ever touched, and the
   markup can sit on any page without colliding with what is already there.

   The "Enquire" pane (the GHL form) is server-rendered and visible by default;
   only the Instant pane carries `hidden`. A crawler or a JS-off visitor still
   gets the form, exactly as on MIX and ZOOM.

   Palette sampled from the live UNION site, not guessed: primary #F3C426 on
   black text, 50px pills, Sailec Light 700, on UNION's white ground. */

.un-book-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 auto 2rem;
}

.un-book-tab {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-height: 48px;              /* comfortable tap target on mobile */
  padding: 0.7rem 1.9rem;
  border: 1px solid #d9d9de;
  border-radius: 50px;           /* matches UNION's own .btn-primary radius */
  background: #fff;
  color: #101113;
  font-family: 'Sailec Light', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.un-book-tab:hover { border-color: #f3c426; }

.un-book-tab:focus-visible {
  outline: 3px solid rgba(243, 196, 38, 0.55);
  outline-offset: 2px;
}

.un-book-tab.is-on {
  background: #f3c426;
  border-color: #f3c426;
  color: #000;
}

/* `hidden` alone loses to any `display` rule the template sets, so pin it. */
.un-book-pane[hidden] { display: none !important; }

/* ---- Instant pane: hands off to UNION's own StudioLink self-serve page ---- */
.un-instant {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 18px;
  text-align: center;
}

.un-instant p {
  margin: 0 auto 1.5rem;
  max-width: 44ch;
  color: #4f545e;
  font: 400 16px/1.6 'Sailec Light', Arial, sans-serif;
}

/* UNION's global link colour is the SAME gold as this pill's background, and its
   selector outranks a bare `.un-instant-go`, so the first cut rendered gold text on
   a gold button: the label was there, sized, and completely invisible. Colour is
   therefore pinned per state, with the extra `.un-booking` ancestor for specificity.
   Caught by looking at the rendered page, not the stylesheet. */
.un-booking .un-instant-go,
.un-booking .un-instant-go:link,
.un-booking .un-instant-go:visited {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 50px;
  background: #f3c426;
  color: #000 !important;
  font: 700 15px/1.2 'Sailec Light', Arial, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.un-booking .un-instant-go:hover,
.un-booking .un-instant-go:focus,
.un-booking .un-instant-go:active {
  background: #e0b31d;
  color: #000 !important;
  text-decoration: none;
}

.un-booking .un-instant-go:focus-visible {
  outline: 3px solid rgba(16, 17, 19, 0.5);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .un-book-tab { font-size: 15px; padding: 0.7rem 1.4rem; }
  .un-instant-go { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .un-book-tab { transition: none; }
}